<template>
  <div class="right-board">
    <el-tabs v-model="currentTab" class="center-tabs tabsAttribute">
      <el-tab-pane label="组件属性" name="field" />
      <el-tab-pane label="表单属性" name="form" />
    </el-tabs>
    <div class="field-box">
      <!-- <a class="document-link" target="_blank" :href="documentLink" title="查看组件文档">
        <i class="el-icon-link" />
      </a> -->
      <el-scrollbar class="right-scrollbar">
        <!-- 组件属性 -->
        <el-form v-show="currentTab==='field' && showField" size="small" label-width="90px" :model="activeData">
          <el-form-item v-if="activeData.__config__.changeTag" label="组件类型">
            <el-select
              v-model="activeData.__config__.tagIcon"
              placeholder="请选择组件类型"
              :style="{width: '100%'}"
              @change="tagChange"
            >
              <el-option-group v-for="group in tagList" :key="group.label" :label="group.label">
                <el-option
                  v-for="item in group.options"
                  :key="item.__config__.label"
                  :label="item.__config__.label"
                  :value="item.__config__.tagIcon"
                >
                  <svg-icon class="node-icon" :icon-class="item.__config__.tagIcon" />
                  <span> {{ item.__config__.label }}</span>
                </el-option>
              </el-option-group>
            </el-select>
          </el-form-item>
         
          <el-form-item 
            v-if="activeData.__vModel__!==undefined" 
            label="字段名" 
            key="__vModel__"
            prop="__vModel__"
            :rules="[{validator:fieldValidator,trigger:'change'}]"
          >
            <el-input v-model="activeData.__vModel__" placeholder="请输入字段名（v-model）"/>
          </el-form-item>
          <el-form-item v-if="activeData.__config__.componentName!==undefined && !['Subform', 'el-card'].includes(activeData.__config__.tag)" label="组件名">
            {{ activeData.__config__.componentName }}
          </el-form-item>
           <el-form-item v-if="activeData.__config__.label!==undefined" label="标题">
            <el-input v-if="activeData.__config__.tag!=='TitleLine'" v-model="activeData.__config__.label" placeholder="请输入标题" @input="(val)=>{changeRenderKey();changePlaceholder(val)}"/>
             <el-input v-else v-model="activeData.content" placeholder="请输入标题" @input="changeRenderKey" />
          </el-form-item>
          <el-form-item v-if="activeData.placeholder!==undefined && !['Subform', 'el-card'].includes(activeData.__config__.tag)" label="占位提示">
            <el-input v-model="activeData.placeholder" placeholder="请输入占位提示" @input="changeRenderKey" />
          </el-form-item>
          <el-form-item v-if="activeData.__config__.codingRules" label="编码规则">
            <el-select  placeholder="请选择规则" @change="changeRulesValue" v-model="activeData.rulesSelectValue">
              <el-option :label='v.encodeName' :value='v.id' v-for='v in rulesArray' :key='v.id'>{{v.encodeName}}</el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="activeData['start-placeholder']!==undefined" label="开始占位">
            <el-input v-model="activeData['start-placeholder']" placeholder="请输入占位提示" />
          </el-form-item>
          <el-form-item v-if="activeData['end-placeholder']!==undefined" label="结束占位">
            <el-input v-model="activeData['end-placeholder']" placeholder="请输入占位提示" />
          </el-form-item>
          <el-form-item label="描述信息" v-if="!['Subform', 'TitleLine', 'el-tabs', 'Steps','el-collapse', 'el-card'].includes(activeData.__config__.tag) && activeData.__config__.tagIcon!=='row'">
            <el-input type="textarea" :rows="2" v-model="activeData.__config__.descriptionMessage" placeholder="请输入描述信息" @input="changeRenderKey"/>
          </el-form-item>
          <el-form-item v-if="activeData.__config__.span!==undefined" label="表单栅格">
            <el-slider v-model="activeData.__config__.span" :max="24" :min="1" :marks="{12:''}" @change="spanChange" />
          </el-form-item>
          <el-form-item v-if="activeData.__config__.tag === 'el-card'" label="阴影显示">
            <el-select v-model="activeData.__config__.shadow">
              <el-option label="鼠标悬浮时显示" value="hover"></el-option>
              <el-option label="从不显示" value="never"></el-option>
              <el-option label="总是显示" value="always"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="activeData.__config__.layout==='rowFormItem'&&activeData.gutter!==undefined" label="栅格间隔">
            <el-input-number v-model="activeData.gutter" :min="0" placeholder="栅格间隔" />
          </el-form-item>
          <el-form-item v-if="activeData.__config__.layout==='rowFormItem' && activeData.type!==undefined && !['el-collapse', 'el-tabs', 'el-card'].includes(activeData.__config__.tag)" label="布局模式">
            <el-radio-group v-model="activeData.type">
              <el-radio-button label="default" />
              <el-radio-button label="flex" />
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="activeData.justify!==undefined&&activeData.type==='flex'" label="水平排列">
            <el-select v-model="activeData.justify" placeholder="请选择水平排列" :style="{width: '100%'}">
              <el-option
                v-for="(item, index) in justifyOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="activeData.align!==undefined&&activeData.type==='flex'" label="垂直排列">
            <el-radio-group v-model="activeData.align">
              <el-radio-button label="top" />
              <el-radio-button label="middle" />
              <el-radio-button label="bottom" />
            </el-radio-group>
          </el-form-item>
          <el-form-item  label="标签宽度" v-if="!['TitleLine', 'el-tabs', 'el-card', 'Steps', 'el-collapse'].includes(activeData.__config__.tag) && activeData.__config__.tagIcon !== 'row'">
            <el-input-number v-model="activeData.__config__.labelWidth" :min="1" placeholder="请输入标签宽度" style="width: 100%"/>
          </el-form-item>
          <el-form-item v-if="activeData.__config__.tag === 'pictureSelect'" label="选项内容">
          </el-form-item>
          <template v-if="activeData.__config__.tag === 'pictureSelect'">
                <el-divider>需先上传图片</el-divider>
                <template>
                    <div style="max-height: 200px;overflow-y: auto;" id="picDiv">
                        <draggable :list="activeData.options" :animation="340" group="selectItem" handle=".option-drag">
                            <div v-for="(item, index) in activeData.options" :key="index" class="picBorderCss">
                                <el-checkbox v-if="activeData.multiple" @change="checkPicChange" v-model="activeData.options[index].checked" style="margin: auto;padding-right: 5px;"></el-checkbox>
                                <el-radio v-if="!activeData.multiple" @change="radioPicChange" v-model="activeData.__config__.defaultValue" :label="item.id" style="margin: auto;padding-right: 5px;">{{''}}</el-radio>
                                <span :style="{'background-image': 'url(' + item.value +')'}" class="backgroundEdit">
                                    <el-upload
                                        :limit="1"
                                        :headers="{ 'Authorization': 'Bearer ' + localStorageTemp, 'tenant-id': tenantId }"
                                        :show-file-list="false"
                                        :on-success="uploadSuccess"
                                        accept=".jpg, .png, .jpeg, .svg"
                                        :action="loadAction">
                                        <span class="showEdit" @click="setRowIndex(index)"><i class="el-icon-edit"></i></span>
                                    </el-upload>
                                </span>
                                <el-input v-model="item.label" placeholder="选项名" size="small" class="picInput"/>
                                <div class="select-line-icon option-drag">
                                    <i class="el-icon-s-operation" />
                                </div>
                                <div class="close-btn select-line-icon" @click="activeData.options.splice(index, 1)">
                                    <i class="el-icon-remove-outline" style="color:red"/>
                                </div>
                            </div>
                        </draggable>
                    </div>
                    <div>
                        <div class="addPicCss" @click="addPictureItem"><i class="el-icon-error" style="transform: rotate(45deg);margin-right: 5px;"/>添加图片选项</div>
                    </div>
                </template>
                <el-divider />
          </template>
          <el-form-item  v-if="activeData.__config__.tag==='Subform'" label="默认值">
            <el-select v-model="activeData.__config__.setValueForm" @change="changeValueForm">
               <el-option label="值来源" value="1" />
               <el-option label="固定值" value="2" />
            </el-select>
            <div style="margin-top:20px">
                <div>
                    <el-button style="width:100%" @click="settingValuekData">值来源设置</el-button>
                </div>
            </div>
          </el-form-item>
           <!-- 操作按钮 -->
           <template v-if="activeData.__config__.tag==='Subform'">
            <div style='display:flex;justify-content: space-between;align-items: center;padding:0 10px;margin:0 0 8px 0'>
              <div style='fontSize:14px'>操作按钮</div>
              <el-dropdown trigger="click" style='cursor: pointer;color: #409EFF;' @command='addOptionBtn'>
                <span class="el-dropdown-link">
                  添加按钮 :
                </span>
                <el-dropdown-menu slot="dropdown" >
                  <el-dropdown-item v-for="v in btnConfig" :key='v.command' :command='v.command' :disabled='hideBtn(v)'>{{v.label}}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <draggable :list="activeData['options']" :animation="340" group="selectItem" handle=".option-drag">
              <div v-for="(item, index) in activeData['options']" :key="index" class="select-item">
                <div style='display:flex;justify-content: space-between;background:#ededed;width:100%;align-items: center;padding:0 10px'>
                  <div style='fontSize:14px'>{{item.label}}</div>
                  <div style='display:flex;justify-content: space-between;align-items: center'>
                      <i class="el-icon-s-tools" style='fontSize:16px;marginRight:5px' @click="setBtn(item)"/>
                      <i class="el-icon-delete" style='fontSize:16px;margin:0 4px' @click="removeBtnOption(index)"></i>
                      <i class="el-icon-rank select-line-icon option-drag" style='fontSize:18px' />
                  </div>
                </div>
              </div>
            </draggable>
          </template>
          <el-form-item v-if="activeData.style&&activeData.style.width!==undefined" label="组件宽度">
            <el-input v-model="activeData.style.width" placeholder="请输入组件宽度" clearable  @input="changeRenderKey"/>
          </el-form-item>
          <template v-if="activeData.__config__.tag==='LenovoPopup' && activeData.dataType">
           <el-form-item label="数据类型">
               <el-radio-group v-model="activeData.dataType" size="small" @change="changeDataTypeLenovo">
                 <el-radio-button label="datasource">
                   数据源
                 </el-radio-button>
                 <el-radio-button label="dictionary">
                   数据字典
                 </el-radio-button>
               </el-radio-group>
             </el-form-item>
              <template v-if="activeData.dataType === 'datasource'">
               <el-form-item label="数据来源">
                 <!-- <el-select v-model="activeData.dataSource" @change="getFieldColumns">
                  <el-option v-for="item in allTables" :key="item.value" :label="item.label" :value="item.value"  style="width:227px;">
                  </el-option>
                 </el-select> -->
                 <el-select filterable v-model="activeData.dataSource" @change="changeTable">
                  <el-option v-for="item in tableOptions" :key="item.value" :label="item.label" :value="item.value"  style="width:227px;">
                  </el-option>
                 </el-select>
               </el-form-item>
               <el-form-item label="显示字段">
                 <el-select filterable v-model="activeData.fieldName">
                   <el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value" style="width:227px;">
                   </el-option>
                 </el-select>
               </el-form-item>
               <!-- <el-form-item  label="保存字段">
                 <el-select filterable v-model="activeData.saveFieldName">
                   <el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value" style="width:227px;">
                   </el-option>
                 </el-select>
               </el-form-item> -->
             </template>
             <template v-else>
               <el-form-item label="数据字典">
                  <el-select filterable v-model="activeData.dictName">
                    <el-option v-for="item in dictOptions" :key="item.value" :label="item.label" :value="item.value"  style="width:227px;">
                    </el-option>
                  </el-select>
               </el-form-item>
             </template>
          </template>
          <el-form-item v-if="activeData.__vModel__!==undefined && activeData.__config__.defaultSelect" label="默认值">
            <el-select v-model="activeData.__config__.defaultSelect" placeholder="请选择" :style="{width: '100%'}">
              <el-option
                v-for="(item, index) in (['numbers', 'number', 'textarea', 'input'].includes(activeData.__config__.tagIcon)) ? defaultValueNumberOptions : defaultValueOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                style="width:227px;"
              />
            </el-select>
            <div style="margin-top:20px">
                <div v-if="activeData.__config__.defaultSelect === 'staticValue'">
                    <el-input
                    :value="setDefaultValue(activeData.__config__.defaultValue)"
                    placeholder="请选择"
                    @input="onDefaultValueInput"
                    />
                </div>
                <div v-else-if="activeData.__config__.defaultSelect === 'linkData'">
                    <el-button style="width:100%" @click="settingLinkData">设置联动数据</el-button>
                </div>
                <div v-else>
                    <el-button style="width:100%" @click="formulaFunc">
                            <img :src="formulaIcon" style="width: 25px;margin: -6px;padding-right: 5px;"/>
                            {{activeData.__config__.formulaStr ? '已设置公式' : '公式编辑'}}
                    </el-button>
                </div>
            </div>
          </el-form-item>
          <!-- v-if="activeData.relatedData" -->
          <el-form-item label="关联数据" v-if="activeData.__config__.relatedData">
                <el-button style="width:100%" @click="settingRelatedData">设置关联数据</el-button>
          </el-form-item>
          <el-form-item v-if="['UsersSelector','PostSelection','DepartmentSelection'].indexOf(activeData.__config__.tag) > -1" label="默认值" >
           <el-select v-model="activeData.defaultValueKey" placeholder="请选择" :style="{width: '100%'}" @change='defaultValueChange'>
              <el-option
                v-for="(item, index) in defaultSelectOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                style="width:227px;"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="activeData.defaultValueKey==='stickValue'" label="" >
             <el-input :style="{width: '100%'}" @focus='defaultBtn' prefix-icon='el-icon-plus'   placeholder="请选择" ref="selectBox"></el-input>
          </el-form-item>
          <el-form-item v-if="activeData.defaultValueKey==='presetValue'" label="" >
            <el-input :style="{width: '100%'}" disabled :value="'当前' + activeData.__config__.label"></el-input>
          </el-form-item>
          <el-form-item v-if="activeData.__config__.tag==='el-checkbox-group'" label="至少应选">
            <el-input-number
              :value="activeData.min"
              :min="0"
              placeholder="至少应选"
              @input="$set(activeData, 'min', $event?$event:undefined)"
            />
          </el-form-item>
           <el-form-item v-if="activeData.__config__.tag==='TitleLine'" label="颜色">
            <el-color-picker v-model="activeData.styleConfig.color"></el-color-picker>
          </el-form-item>
           <el-form-item v-if="activeData.type==='title'" label="字体大小">
             <el-input-number v-model="activeData.styleConfig.fontSize" :min="1" placeholder="字体大小" />
             <span> px</span>
           </el-form-item>
          <el-form-item v-if="activeData.type==='divider'" label="上间距">
            <el-input-number v-model="activeData.styleConfig.marginTop" :min="1" placeholder="上间距" />
            <span> px</span>
          </el-form-item>
          <el-form-item v-if="activeData.type==='divider'" label="下间距">
            <el-input-number v-model="activeData.styleConfig.marginBottom" :min="1" placeholder="下间距" />
            <span> px</span>
          </el-form-item>
          <el-form-item v-if="activeData.__config__.tag==='TitleLine'" label="对齐方式">
            <el-radio-group v-model="activeData['content-position']">
              <el-radio-button label="left">
                左对齐
              </el-radio-button>
              <el-radio-button label="center">
                居中
              </el-radio-button>
              <el-radio-button label="right">
                右对齐
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="activeData.__config__.tag==='el-checkbox-group'" label="最多可选">
            <el-input-number
              :value="activeData.max"
              :min="0"
              placeholder="最多可选"
              @input="$set(activeData, 'max', $event?$event:undefined)"
            />
          </el-form-item>
          <!-- <template v-if="activeData.__config__.tag==='LenovoPopup'">
            <el-form-item label="前缀">
              <el-input v-model="activeData.prepend" placeholder="请输入前缀" />
            </el-form-item>
            <el-form-item  label="后缀">
              <el-input v-model="activeData.append" placeholder="请输入后缀" />
            </el-form-item>
          </template> -->
          <el-form-item v-if="activeData.__slot__&&activeData.__slot__.prepend!==undefined" label="前缀">
            <el-input v-model="activeData.__slot__.prepend" placeholder="请输入前缀" />
          </el-form-item>
          <el-form-item v-if="activeData.__slot__&&activeData.__slot__.append!==undefined" label="后缀">
            <el-input v-model="activeData.__slot__.append" placeholder="请输入后缀" />
          </el-form-item>
          <el-form-item v-if="activeData['prefix-icon']!==undefined" label="前图标">
            <el-input v-model="activeData['prefix-icon']" placeholder="请输入前图标名称">
              <el-button slot="append" icon="el-icon-thumb" @click="openIconsDialog('prefix-icon')">
                选择
              </el-button>
            </el-input>
          </el-form-item>
          <el-form-item v-if="activeData['suffix-icon'] !== undefined" label="后图标">
            <el-input v-model="activeData['suffix-icon']" placeholder="请输入后图标名称">
              <el-button slot="append" icon="el-icon-thumb" @click="openIconsDialog('suffix-icon')">
                选择
              </el-button>
            </el-input>
          </el-form-item>
          <el-form-item
            v-if="activeData['icon']!==undefined && activeData.__config__.tag === 'el-button'"
            label="按钮图标"
          >
            <el-input v-model="activeData['icon']" placeholder="请输入按钮图标名称">
              <el-button slot="append" icon="el-icon-thumb" @click="openIconsDialog('icon')">
                选择
              </el-button>
            </el-input>
          </el-form-item>
          <el-form-item v-if="activeData.__config__.tag === 'el-cascader'" label="选项分隔符">
            <el-input v-model="activeData.separator" placeholder="请输入选项分隔符" />
          </el-form-item>
          <el-form-item v-if="activeData.autosize !== undefined" label="最小行数">
            <el-input-number v-model="activeData.autosize.minRows" :min="1" placeholder="最小行数"  @input="changeRenderMax"/>
          </el-form-item>
          <el-form-item v-if="activeData.autosize !== undefined" label="最大行数">
            <el-input-number v-model="activeData.autosize.maxRows" :min="1" placeholder="最大行数"   @input="changeRenderMax"/>
          </el-form-item>
          <el-form-item v-if="isShowMin" label="最小值">
            <el-input-number v-model="activeData.min" placeholder="最小值" />
          </el-form-item>
          <el-form-item v-if="isShowMax  && activeData.__config__.tag !== 'el-rate'" label="最大值">
            <el-input-number v-model="activeData.max" placeholder="最大值" />
          </el-form-item>
          <el-form-item v-if="isShowMax && activeData.__config__.tag === 'el-rate'" label="最大值">
            <el-input-number v-model="activeData.max" placeholder="最大值" :max="10"/>
          </el-form-item>
          <el-form-item v-if="activeData.__config__.tag === 'tinymce'" label="组件高度">
            <el-input-number v-model="activeData.height" placeholder="高度" @change="changeRenderKeyHeight" />
          </el-form-item>
          <el-form-item v-if="isShowStep" label="步长">
            <el-input-number v-model="activeData.step" placeholder="步数" />
          </el-form-item>
          <el-form-item v-if="activeData.__config__.tag === 'el-input-number'" label="精度">
            <el-input-number v-model="activeData.precision" :min="0" placeholder="精度" />
          </el-form-item>
          <el-form-item v-if="activeData.__config__.tag === 'el-input-number'" label="按钮位置">
            <el-radio-group v-model="activeData['controls-position']">
              <el-radio-button label="">
                默认
              </el-radio-button>
              <el-radio-button label="right">
                右侧
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="activeData['active-text'] !== undefined" label="开启提示">
            <el-input v-model="activeData['active-text']" placeholder="请输入开启提示" />
          </el-form-item>
          <el-form-item v-if="activeData['inactive-text'] !== undefined" label="关闭提示">
            <el-input v-model="activeData['inactive-text']" placeholder="请输入关闭提示" />
          </el-form-item>
          <el-form-item v-if="activeData['active-value'] !== undefined" label="开启值">
            <el-input
              :value="setDefaultValue(activeData['active-value'])"
              placeholder="请输入开启值"
              @input="onSwitchValueInput($event, 'active-value')"
            />
          </el-form-item>
          <el-form-item v-if="activeData['inactive-value'] !== undefined" label="关闭值">
            <el-input
              :value="setDefaultValue(activeData['inactive-value'])"
              placeholder="请输入关闭值"
              @input="onSwitchValueInput($event, 'inactive-value')"
            />
          </el-form-item>
          <!-- <el-form-item
            v-if="activeData.type !== undefined && 'el-date-picker' === activeData.__config__.tag"
            label="时间类型"
          >
            <el-select
              v-model="activeData.type"
              placeholder="请选择时间类型"
              :style="{ width: '100%' }"
              @change="dateTypeChange"
            >
              <el-option
                v-for="(item, index) in dateOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item> -->
          <el-form-item v-if="activeData.name !== undefined" label="文件字段名">
            <el-input v-model="activeData.name" placeholder="请输入上传文件字段名" />
          </el-form-item>
          <el-form-item v-if="activeData.accept !== undefined" label="文件类型">
            <el-select
              v-model="activeData.accept"
              placeholder="请选择文件类型"
              :style="{ width: '100%' }"
            >
              <el-option label="全部" value="image/*,video/*,audio/*,.txt,.pdf, .doc, .docx, .xls, .xlsx,.cvs,.xml,.ppt,.pptx,.wps,.htm,.html,.rtf,.hlp,.zip,.rar,.7z,.gz,.arj,.z" />
              <el-option label="图片" value="image/*" />
              <el-option label="视频" value="video/*" />
              <el-option label="音频" value="audio/*" />
              <el-option label="excel" value=".xls,.xlsx" />
              <el-option label="word" value=".doc,.docx" />
              <el-option label="pdf" value=".pdf" />
              <el-option label="txt" value=".txt" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="activeData.__config__.fileSize !== undefined" label="文件大小">
            <el-input v-model.number="activeData.__config__.fileSize" placeholder="请输入文件大小">
              <el-select slot="append" v-model="activeData.__config__.sizeUnit" :style="{ width: '66px' }">
                <el-option label="KB" value="KB" />
                <el-option label="MB" value="MB" />
                <el-option label="GB" value="GB" />
              </el-select>
            </el-input>
          </el-form-item>
          <el-form-item v-if="activeData.action !== undefined" label="上传地址">
            <el-input v-model="activeData.action" placeholder="请输入上传地址" clearable disabled/>
          </el-form-item>
          <el-form-item v-if="activeData['list-type'] !== undefined" label="列表类型">
            <el-radio-group v-model="activeData['list-type']" size="small">
              <el-radio-button label="text">
                text
              </el-radio-button>
              <el-radio-button label="picture">
                picture
              </el-radio-button>
              <el-radio-button label="picture-card">
                picture-card
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-if="activeData.type !== undefined && activeData.__config__.tag === 'el-button'"
            label="按钮类型"
          >
            <el-select v-model="activeData.type" :style="{ width: '100%' }">
              <el-option label="primary" value="primary" />
              <el-option label="success" value="success" />
              <el-option label="warning" value="warning" />
              <el-option label="danger" value="danger" />
              <el-option label="info" value="info" />
              <el-option label="text" value="text" />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="activeData.__config__.buttonText !== undefined"
            v-show="'picture-card' !== activeData['list-type']"
            label="按钮文字"
          >
            <el-input v-model="activeData.__config__.buttonText" placeholder="请输入按钮文字" />
          </el-form-item>
          <el-form-item
            v-if="activeData.__config__.tag === 'el-button'"
            label="按钮文字"
          >
            <el-input v-model="activeData.__slot__.default" placeholder="请输入按钮文字" />
          </el-form-item>
          <el-form-item v-if="activeData['range-separator'] !== undefined" label="分隔符">
            <el-input v-model="activeData['range-separator']" placeholder="请输入分隔符" />
          </el-form-item>
          <el-form-item v-if="activeData.format !== undefined" label="时间格式">
            <div v-if="['time', 'time-range'].includes(activeData.__config__.tagIcon)">
                <el-select v-model="activeData.format" placeholder="请选择" style="width: 227px" @change="setTimeValue">
                    <!-- <el-option label="时:分" value="HH:mm"></el-option> -->
                    <el-option label="时:分:秒" value="HH:mm:ss"></el-option>
                </el-select>
            </div>
            <div v-if="['date', 'date-range'].includes(activeData.__config__.tagIcon)">
                <el-select v-model="activeData.format" placeholder="请选择" style="width: 227px" @change="setTimeValue">
                    <!-- 日期选择 -->
                    <!-- <div v-if="activeData.__config__.tagIcon === 'date'">
                        <el-option v-for="(curFormat, index) in dateRangeOptions" :key="index" :label="curFormat.label" :value="curFormat.value"></el-option>
                    </div> -->
                    <!-- 日期选择、日期范围 -->
                    <div>
                        <el-option v-for="(curFormat, index) in dateRangeOptions" :key="index" :label="curFormat.label" :value="curFormat.value"></el-option>
                    </div>
                </el-select>
            </div>
          </el-form-item>
          <el-form-item v-if="['time', 'date', 'date-range'].includes(activeData.__config__.tagIcon)" label="是否限制" >
            <el-switch v-model="activeData.isLimit" @change="changeIslimit"/>
          </el-form-item>
          <el-form-item v-if="activeData.isLimit && !(activeData.__config__.tagIcon === 'date-range' && activeData.format == 'yyyy')" label="时间段">
            <el-time-picker
                v-if="activeData.__config__.tagIcon.indexOf('time') !== -1"
                style="width:'230px'"
                v-model="timeValue"
                is-range
                :clearable="false"
                range-separator="-"
                :value-format="activeData.format"
                :format="activeData.format"
                :disabled="!activeData.isLimit"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围">
            </el-time-picker>
            <el-date-picker
                v-if="activeData.__config__.tagIcon.indexOf('date') !== -1"
                style="width:'230px'"
                v-model="dateValue"
                :type="showType"
                :clearable="false"
                range-separator=":"
                :value-format="activeData.format"
                :format="activeData.format"
                :disabled="!activeData.isLimit || activeData.format == 'yyyy'"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                placeholder="选择日期范围">
            </el-date-picker>
          </el-form-item>
          <!-- <template v-if="['el-checkbox-group', 'el-radio-group', 'el-select'].indexOf(activeData.__config__.tag) > -1">
            <el-divider>选项</el-divider>
            <draggable
              :list="activeData.__slot__.options"
              :animation="340"
              group="selectItem"
              handle=".option-drag"
            >
              <div v-for="(item, index) in activeData.__slot__.options" :key="index" class="select-item">
                <div class="select-line-icon option-drag">
                  <i class="el-icon-s-operation" />
                </div>
                <el-input v-model="item.label" placeholder="选项名" size="small" />
                <el-input
                  placeholder="选项值"
                  size="small"
                  :value="item.value"
                  @input="setOptionValue(item, $event)"
                />
                <div class="close-btn select-line-icon" @click="activeData.__slot__.options.splice(index, 1)">
                  <i class="el-icon-remove-outline" />
                </div>
              </div>
            </draggable>
            <div style="margin-left: 20px;">
              <el-button
                style="padding-bottom: 0"
                icon="el-icon-circle-plus-outline"
                type="text"
                @click="addSelectItem"
              >
                添加选项
              </el-button>
            </div>
            <el-divider />
          </template> -->
          <template v-if="['my-checkbox-group', 'my-radio-group'].includes(activeData.__config__.tag)||  activeData.__config__.tagIcon == 'select'">
             <el-divider>选项</el-divider>
             <el-form-item v-if="activeData.dataType" label="数据类型">
               <el-radio-group v-model="activeData.dataType" size="small" @change="changeDataType">
                 <el-radio-button label="static">
                   静态数据
                 </el-radio-button>
                 <el-radio-button label="dictionary">
                   数据字典
                 </el-radio-button>
                 <el-radio-button label="datasource">
                   数据源
                 </el-radio-button>
               </el-radio-group>
             </el-form-item>
             <template v-if="activeData.dataType === 'static'">
               <draggable :list="activeData.options" :animation="340" group="selectItem" handle=".option-drag">
                 <div v-for="(item, index) in activeData.options" :key="index" class="select-item">
                    <el-checkbox v-model="activeData.options[index].checked" style="margin:auto 0"></el-checkbox>
                   <div class="select-line-icon option-drag">
                     <i class="el-icon-s-operation" />
                   </div>
                   <el-input v-model="item.label" placeholder="选项名" size="small" />
                   <el-input placeholder="选项值" size="small" :value="item.value" @input="setOptionValue(item, $event)" />
                   <div class="close-btn select-line-icon" @click="activeData.options.splice(index, 1)">
                     <i class="el-icon-remove-outline" />
                   </div>
                 </div>
               </draggable>
               <div style="margin-left: 20px;">
                 <el-button style="padding-bottom: 0" icon="el-icon-circle-plus-outline" type="text"
                   @click="addMySelectItem">
                   添加选项
                 </el-button> &nbsp;
                 <el-button style="padding-bottom: 0;color:red" icon="el-icon-delete" type="text"
                   @click="DelSelectItem">
                   批量删除
                 </el-button>
               </div>
             </template>
             <template v-else-if="activeData.dataType === 'datasource'">
               <el-form-item label="数据库表">
                 <el-select filterable  v-model="activeData.tableName" @change="changeTable">
                  <el-option v-for="item in tableOptions" :key="item.value" :label="item.label" :value="item.value"  style="width:227px;">
                  </el-option>
                 </el-select>
               </el-form-item>
               <el-form-item label="显示字段">
                 <el-select filterable v-model="activeData.fieldName">
                   <el-option v-for="(item, index) in fieldOptions" :key="index" :label="item.label" :value="item.value" style="width:227px;">
                   </el-option>
                 </el-select>
               </el-form-item>
                <el-form-item label="保存字段">
                 <el-select filterable v-model="activeData.saveFieldName">
                   <el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value" style="width:227px;">
                   </el-option>
                 </el-select>
               </el-form-item>
             </template>
             <template v-else>
               <el-form-item label="数据字典">
                  <el-select v-model="activeData.dictName" filterable>
                    <el-option v-for="item in dictOptions" :key="item.value" :label="item.label" :value="item.value"  style="width:227px;">
                    </el-option>
                  </el-select>
               </el-form-item>
             </template>
            <el-divider />
          </template>

          <template v-if="['my-cascader', 'el-tree-select'].includes(activeData.__config__.tag)">
            <el-divider>选项</el-divider>
            <el-form-item v-if="activeData.dataType" label="数据类型">
              <el-radio-group v-model="activeData.dataType" size="small">
                <el-radio-button label="static">
                  静态数据
                </el-radio-button>
                <el-radio-button label="dynamic">
                  数据源
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
           <template v-if="activeData.dataType === 'dynamic'">
             <el-button style="padding-bottom: 0" icon="el-icon-circle-plus-outline" type="text" @click="()=>{dialogDynamicVisible = true}">
               配置数据源
             </el-button>
           </template>
           <el-tree v-if="activeData.dataType === 'static'" draggable :data="activeData.options" node-key="id"
            :expand-on-click-node="false" :render-content="renderContent" show-checkbox ref="tree-menu" />
            <div v-if="activeData.dataType === 'static'" style="margin-left: 20px">
            <el-button style="padding-bottom: 0" icon="el-icon-circle-plus-outline" type="text" @click="addTreeItem">
              添加父级
            </el-button>
            <el-button style="padding-bottom: 0;color:red" icon="el-icon-delete" type="text" @click="delTreeItem">
              批量删除
            </el-button>
          </div>
          <el-divider />
          </template>

          <!-- <template v-if="['el-cascader', 'el-table'].includes(activeData.__config__.tag)">
            <el-divider>选项</el-divider>
            <el-form-item v-if="activeData.__config__.dataType" label="数据类型">
              <el-radio-group v-model="activeData.__config__.dataType" size="small">
                <el-radio-button label="dynamic">
                  动态数据
                </el-radio-button>
                <el-radio-button label="static">
                  静态数据
                </el-radio-button>
              </el-radio-group>
            </el-form-item>

            <template v-if="activeData.__config__.dataType === 'dynamic'">
              <el-form-item label="接口地址">
                <el-input
                  v-model="activeData.__config__.url"
                  :title="activeData.__config__.url"
                  placeholder="请输入接口地址"
                  clearable
                  @blur="$emit('fetch-data', activeData)"
                >
                  <el-select
                    slot="prepend"
                    v-model="activeData.__config__.method"
                    :style="{width: '85px'}"
                    @change="$emit('fetch-data', activeData)"
                  >
                    <el-option label="get" value="get" />
                    <el-option label="post" value="post" />
                    <el-option label="put" value="put" />
                    <el-option label="delete" value="delete" />
                  </el-select>
                </el-input>
              </el-form-item>
              <el-form-item label="数据位置">
                <el-input
                  v-model="activeData.__config__.dataPath"
                  placeholder="请输入数据位置"
                  @blur="$emit('fetch-data', activeData)"
                />
              </el-form-item>

              <template v-if="activeData.props && activeData.props.props">
                <el-form-item label="标签键名">
                  <el-input v-model="activeData.props.props.label" placeholder="请输入标签键名" />
                </el-form-item>
                <el-form-item label="值键名">
                  <el-input v-model="activeData.props.props.value" placeholder="请输入值键名" />
                </el-form-item>
                <el-form-item label="子级键名">
                  <el-input v-model="activeData.props.props.children" placeholder="请输入子级键名" />
                </el-form-item>
              </template>
            </template>
            <el-tree
              v-if="activeData.__config__.dataType === 'static'"
              draggable
              :data="activeData.options"
              node-key="id"
              :expand-on-click-node="false"
              :render-content="renderContent"
            />
            <div v-if="activeData.__config__.dataType === 'static'" style="margin-left: 20px">
              <el-button
                style="padding-bottom: 0"
                icon="el-icon-circle-plus-outline"
                type="text"
                @click="addTreeItem"
              >
                添加父级
              </el-button>
            </div>
            <el-divider />
          </template> -->

          <el-form-item v-if="activeData.optionType !== undefined" label="选项样式">
            <el-radio-group v-model="activeData.optionType">
              <el-radio-button label="default">
                默认
              </el-radio-button>
              <el-radio-button label="button">
                按钮
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="activeData['active-color'] !== undefined" label="开启颜色">
            <el-color-picker v-model="activeData['active-color']" />
          </el-form-item>
          <el-form-item v-if="activeData['inactive-color'] !== undefined" label="关闭颜色">
            <el-color-picker v-model="activeData['inactive-color']" />
          </el-form-item>
          <!-- 子表单布局设置 -->
          <template v-if="activeData.__config__.tag==='Subform'">
             <el-divider>布局设置</el-divider>
            <el-form-item label="编辑模式" >
              <el-select v-model="activeData.__config__.editType" placeholder="选项名" size="small">
                  <el-option value='table' label='表内编辑模式'></el-option>
                  <el-option value='dialog' label='弹窗模式'></el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="activeData.__config__.tag === 'Subform'"
              label="子表单列宽度" style="marginBottom:5px" labelWidth="115px">
              <div style='display: flex;justify-content: flex-end;margin-left: 20px'>
                <el-switch v-model="activeData.__config__.labelIsShow" style='marginTop:6px'/>
              </div>
            </el-form-item>
            <div style='marginBottom:10px' v-if='activeData.__config__.labelIsShow'>
              <el-input size="small" v-model="activeData.__config__.columnWidth" style='width:60%;padding-left: 22px;'/>
              <span style='marginLeft:10px'>px</span>
            </div>

            <el-form-item v-if="activeData.__config__.tag === 'Subform'"
              label="显示序号" style="marginBottom:5px">
              <div style='display: flex;justify-content: flex-end;margin-left: 20px'>
                <el-switch v-model="activeData.__config__.showNum" style='marginTop:6px'/>
              </div>
            </el-form-item>
            <div style='marginBottom:10px' v-if='activeData.__config__.showNum'>
              <el-input size="small" v-model="activeData.__config__.numLabel" style='width:40%;padding-left: 22px;'/>
              <el-input-number size="small" :min="0" style="marginRight:10px;margin-left: 20px"
                controls-position="right" v-model="activeData.__config__.numWidth">
              </el-input-number>px
            </div>
            <el-form-item v-if="activeData.__config__.tag === 'Subform'"
              label="自定义列" style="marginBottom:5px">
              <div style='display: flex;justify-content: flex-end'>
                <el-switch v-model="activeData.__config__.showCustomColumn" style='marginTop:6px'/>
              </div>
            </el-form-item>
          </template>
          <!-- 排序设置 -->
          <template v-if="activeData.__config__.tag === 'Subform'">
            <el-divider>排序设置</el-divider>
            <el-form-item label="排序字段">
              <el-select filterable  v-model="activeData.__config__.sortField" clearable placeholder="请选择排序字段" size="small">
                <el-option v-for="item in sortList" :key="item.__config__.formId" :label="item.__config__.label" :value="item.__config__.formId" style="width:227px;">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="排序类型">
              <el-select v-model="activeData.__config__.sortType" clearable placeholder="请选择排序类型" size="small">
                <el-option label="降序" value="desc">
                </el-option>
                <el-option label="升序" value="asc">
                </el-option>
              </el-select>
            </el-form-item>
          </template>
          <!-- 分页设置 -->
          <template v-if="activeData.__config__.tag === 'Subform'">
             <el-divider>分页设置</el-divider>
             <el-form-item
              label="是否分页" style="marginBottom:5px">
              <div style='display: flex;justify-content: flex-end'>
                <el-switch v-model="activeData.__config__.isPage" style='marginTop:6px'/>
              </div>
            </el-form-item>
             <el-form-item v-if="activeData.__config__.isPage"
              label="分页条数">
                <el-radio-group v-model="activeData.__config__.pageSize">
                  <el-radio-button label=10></el-radio-button>
                  <el-radio-button label=20></el-radio-button>
                  <el-radio-button label=30></el-radio-button>
                  <el-radio-button label=50></el-radio-button>
                </el-radio-group>
            </el-form-item>
          </template>
          <!-- 固定列 -->
          <template v-if="activeData.__config__.tag === 'Subform'">
             <el-divider>固定列</el-divider>
            <el-form-item label="左固定列">
            <el-input-number :min="0" v-model="activeData.__config__.leftCol" size="small" style="marginRight:10px;"
              controls-position="right"></el-input-number>列
          </el-form-item>
          <el-form-item label="右固定列">
            <el-input-number :min="0" v-model="activeData.__config__.rightCol" size="small" style="marginRight:10px;"
              controls-position="right">
            </el-input-number>列
          </el-form-item>
          </template>
          <el-form-item v-if="activeData.__config__.titleRap !== undefined
            && activeData.__config__.labelWidth !== undefined" label="显示标签"
           >
            <div style='display: flex;justify-content: flex-end'>
                <el-switch v-model="activeData.__config__.showLabel" style='marginTop:6px'/>
              </div>
          </el-form-item>
          <el-form-item v-if="activeData.__config__.tag === 'Subform'" label="标题是否换行"
           label-width="117px">
            <div style='display: flex;justify-content: flex-end'>
                <el-switch v-model="activeData.__config__.titleRap" style='marginTop:6px'/>
              </div>
          </el-form-item>
          <el-form-item v-if="activeData.__config__.tag === 'Subform'" label="是否显示组件边框"
           label-width="145px">
            <div style='display: flex;justify-content: flex-end'>
                <el-switch v-model="activeData.__config__.componentBorder" style='marginTop:6px'/>
              </div>
          </el-form-item>
          <el-form-item v-if="activeData.__config__.tag === 'Subform'" label="是否显示子表单边框"
           label-width="145px">
            <div style='display: flex;justify-content: flex-end'>
                <el-switch v-model="activeData.__config__.formBorder" style='marginTop:6px'/>
              </div>
          </el-form-item>
          <el-form-item v-if="activeData.branding !== undefined" label="品牌烙印">
            <el-switch v-model="activeData.branding" @input="changeRenderKey" />
          </el-form-item>
          <el-form-item v-if="activeData['allow-half'] !== undefined" label="允许半选">
            <el-switch v-model="activeData['allow-half']" />
          </el-form-item>
          <el-form-item v-if="activeData['show-text'] !== undefined" label="辅助文字">
            <el-switch v-model="activeData['show-text']" @change="rateTextChange" />
          </el-form-item>
          <el-form-item v-if="activeData['show-score'] !== undefined" label="显示分数">
            <el-switch v-model="activeData['show-score']" @change="rateScoreChange" />
          </el-form-item>
          <el-form-item v-if="activeData['show-stops'] !== undefined" label="显示间断点">
            <el-switch v-model="activeData['show-stops']" />
          </el-form-item>
          <el-form-item v-if="activeData.range !== undefined" label="范围选择">
            <el-switch v-model="activeData.range" @change="rangeChange" />
          </el-form-item>
          <el-form-item
            v-if="activeData.__config__.border !== undefined && activeData.__config__.optionType === 'default'"
            label="是否带边框"
          >
            <el-switch v-model="activeData.__config__.border" />
          </el-form-item>
          <el-form-item v-if="activeData.__config__.tag === 'el-color-picker'" label="颜色格式">
            <el-select
              v-model="activeData['color-format']"
              placeholder="请选择颜色格式"
              :style="{ width: '100%' }"
              clearable
              @change="colorFormatChange"
            >
              <el-option
                v-for="(item, index) in colorFormatOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="activeData.size !== undefined &&
              (activeData.__config__.optionType === 'button' ||
                activeData.__config__.border ||
                activeData.__config__.tag === 'el-color-picker' ||
                activeData.__config__.tag === 'el-button')"
            label="组件尺寸"
          >
            <el-radio-group v-model="activeData.size">
              <el-radio-button label="medium">
                中等
              </el-radio-button>
              <el-radio-button label="small">
                较小
              </el-radio-button>
              <el-radio-button label="mini">
                迷你
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="['textarea', 'input'].includes(activeData.__config__.tagIcon)" label="格式">
            <el-select placeholder="请选择常用规则" clearable  @change="addDefaultReg" style="width:227px" v-model="activeData.__config__.patternStr">
                <el-option v-for="item in defaultRules" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="activeData['show-word-limit']" label="最多输入" >
            <el-input v-model="activeData.maxlength" placeholder="请输入字符长度" @blur="tableNameValidator">
              <template slot="append">
                个字符
              </template>
            </el-input>
          </el-form-item>
          <!-- 单行，多行，密码 需要最大输入限制，其他组件不需要  -->
          <el-form-item v-if="activeData.__config__.tag === 'el-input'" label="输入统计">
            <el-switch v-model="activeData['show-word-limit']" />
          </el-form-item>
          <el-form-item v-if="activeData.__config__.tag === 'el-input-number'" label="严格步数">
            <el-switch v-model="activeData['step-strictly']" />
          </el-form-item>
          <el-form-item v-if="activeData.__config__.tag === 'el-cascader'||activeData.__config__.tag === 'my-cascader' || activeData.__config__.tag === 'my-region'"
            label="任选层级">
            <el-switch v-model="activeData.props.props.checkStrictly" />
          </el-form-item>
          <el-form-item v-if="activeData.__config__.tag === 'el-cascader'||activeData.__config__.tag === 'my-cascader' || activeData.__config__.tag === 'my-region'"
            label="是否多选">
            <el-switch v-model="activeData.props.props.multiple" />
          </el-form-item>
          <el-form-item v-if="activeData.__config__.manyCheck"
            label="是否多选">
            <el-switch v-model="activeData.multiple" />
          </el-form-item>
          <el-form-item v-if="['my-cascader', 'my-region'].includes(activeData.__config__.tag)" label="展示全路径">
            <el-switch v-model="activeData['show-all-levels']" />
          </el-form-item>
          <el-form-item v-if="activeData.__config__.tag === 'el-cascader'||activeData.__config__.tag === 'my-cascader'|| activeData.__config__.tag === 'my-region'"
            label="可否筛选">
            <el-switch v-model="activeData.filterable" />
          </el-form-item>
          <el-form-item  label="显示标签" v-if="activeData.__config__.showLabel !== undefined">
            <el-switch v-model="activeData.__config__.showLabel" />
          </el-form-item>
          <el-form-item v-if="activeData.clearable !== undefined" label="能否清空">
            <el-switch v-model="activeData.clearable" />
          </el-form-item>
          <el-form-item v-if="activeData.__config__.showTip !== undefined" label="显示提示">
            <el-switch v-model="activeData.__config__.showTip" />
          </el-form-item>
          <el-form-item v-if="activeData.__config__.tag === 'el-upload'" label="多选文件">
            <el-switch v-model="activeData.multiple" />
          </el-form-item>
          <el-form-item v-if="activeData['auto-upload'] !== undefined" label="自动上传">
            <el-switch v-model="activeData['auto-upload']" />
          </el-form-item>
          <el-form-item v-if="activeData.readonly !== undefined && activeData.__config__.tag !=='tinymce'" label="是否只读">
            <el-switch v-model="activeData.readonly" @input="changeRenderKey"/>
          </el-form-item>
          <el-form-item v-if="activeData.disabled !== undefined && activeData.__config__.tag !=='tinymce' && activeData.__config__.tagIcon !=='coding'" label="是否禁用">
            <el-switch v-model="activeData.disabled" @input="changeRenderKey"/>
          </el-form-item>
          <template v-if="activeData.__config__.tag ==='tinymce'">
            <el-form-item v-if="activeData.disabled !== undefined" label="是否只读">
              <el-switch v-model="activeData.disabled" @input="changeRenderKey"/>
            </el-form-item>
            <el-form-item v-if="activeData.readonly !== undefined" label="是否禁用">
              <el-switch v-model="activeData.readonly" @input="changeRenderKey"/>
            </el-form-item>
          </template>
          <el-form-item v-if="activeData.__config__.tag === 'my-select'" label="能否搜索">
            <el-switch v-model="activeData.filterable" />
          </el-form-item>
          <el-form-item v-if="['pictureSelect'].includes(activeData.__config__.tag) ||  activeData.__config__.tagIcon == 'select' " label="是否多选">
            <el-switch v-model="activeData.multiple" @change="multipleChange" />
          </el-form-item>
          <el-form-item v-if="activeData.__config__.required !== undefined" label="是否必填">
            <el-switch v-model="activeData.__config__.required" />
          </el-form-item>
          <el-form-item v-if="!noRepeatVerify.includes(activeData.__config__.tag) && activeData.__config__.tagIcon !== 'coding' && activeData.__config__.tagIcon !== 'row' " label="重复校验">
            <el-switch v-model="activeData.__config__.repeatVerify" />
          </el-form-item>
          <!-- 数字组件配置 -->
          <template v-if="activeData.__config__.tag ==='el-number'">
            <el-divider content-position="center">格式设置</el-divider>
            <el-select
                v-model="activeData.__config__.numberType"
                placeholder="请选择数字格式"
                :style="{ width: '100%',marginBottom: '5px' }"
                @change="handlerNumberFmt"
                >
                <el-option
                    v-for="(item, index) in [{ label: '数值', value: 'number' }, { label: '百分比', value: 'percentage' }]"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
            <el-checkbox v-model="activeData.__config__.isDecimal" @change="handlerNumberFmt">是否保留小数位数</el-checkbox>
            <el-input-number @change="handlerNumberFmt" :disabled="!activeData.__config__.isDecimal" style="width:120px;margin-left: 30px;" v-model="activeData.__config__.decimalPlaces" controls-position="right" :min="0" :max="6" size="small"></el-input-number>
            <div style="margin: 10px 0px 5px 0px" v-if="activeData.__config__.isDecimal"><span style="font-size:14px">小数是否补零</span><el-switch @change="handlerNumberFmt" style="margin-left:15px" v-model="activeData.__config__.zeroPadding"></el-switch></div>
            <div style="margin: 5px 0px 10px 0px" v-if="activeData.__config__.isDecimal"><span style="font-size:14px">是否四舍五入</span><el-switch @change="handlerNumberFmt" style="margin-left:15px" v-model="activeData.__config__.rounding"></el-switch></div>
            <el-checkbox v-model="activeData.__config__.showThousands" v-if="activeData.__config__.numberType === 'number'" @change="handlerNumberFmt">显示千分符</el-checkbox>
            <div style="width: 100%;height: 60px;text-align:center;line-height: 60px;background-color: lightgrey;font-size: 16px;margin-top:5px">
                {{showFakeNumber}}
            </div>
          </template>
          <!-- 选项卡 -->
          <template v-if="['el-tabs'].indexOf(activeData.__config__.tag) > -1">
            <el-divider>选项</el-divider>
              <draggable
                :list="activeData.__slot__.options"
                :animation="340"
                group="tabsItem"
                handle=".option-drag"
              >
                <div v-for="(item, index) in activeData.__slot__.options" :key="index" class="tabs-item">
                  <div class="tabs-line-icon option-drag">
                    <i class="el-icon-s-operation" />
                  </div>
                  <el-input v-model="item.label" placeholder="选项名" size="small" />
                  <div class="close-btn tabs-line-icon" @click="activeData.__slot__.options.splice(index, 1)">
                    <i class="el-icon-remove-outline" />
                  </div>
                </div>
              </draggable>
            <div style="margin-left: 20px;">
              <el-button style="padding-bottom: 0" icon="el-icon-circle-plus-outline" type="text" @click="addTab">
                添加选项
              </el-button>
            </div>
            <el-divider />
          </template>
          <!-- 折叠面板选项卡 -->
          <template v-if="['el-collapse'].includes(activeData.__config__.tag)">
            <el-divider>选项</el-divider>
              <draggable
                :list="activeData.__slot__.options"
                :animation="340"
                group="collapseItem"
                handle=".option-drag"
              >
                <div v-for="(item, index) in activeData.__slot__.options" :key="index" class="tabs-item">
                  <div class="tabs-line-icon option-drag">
                    <i class="el-icon-s-operation" />
                  </div>
                  <el-input v-model="item.title" placeholder="折叠面板" size="small" />
                  <div class="close-btn tabs-line-icon" @click="activeData.__slot__.options.splice(index, 1)">
                    <i class="el-icon-remove-outline" />
                  </div>
                </div>
              </draggable>
            <div style="margin-left: 20px;">
              <el-button style="padding-bottom: 0" icon="el-icon-circle-plus-outline" type="text" @click="addCollapse">
                添加选项
              </el-button>
            </div>
            <el-divider />
          </template>

          <!-- 步骤条 -->
          <template v-if="['Steps'].indexOf(activeData.__config__.tag) > -1">
            <el-form-item label="标签配置" label-width="70px" />
            <draggable :list="activeData.__slot__['options']" :animation="340" group="selectItem" handle=".option-drag">
              <div v-for="(item, index) in activeData.__slot__['options']" :key="index" class="select-item">
                <div class="select-line-icon option-drag">
                  <i class="el-icon-s-operation" />
                </div>
                <el-input v-model="item.title" placeholder="选项名" size="small" />
                <div class="close-btn select-line-icon" @click="removeOption(index)">
                  <i class="el-icon-remove-outline" />
                </div>
              </div>
            </draggable>
            <div style="margin-left: 20px;">
              <el-button
                style="padding-bottom: 0"
                icon="el-icon-circle-plus-outline"
                type="text"
                @click="addSelectItem"
              >
                添加选项
              </el-button>
            </div>
          <el-divider />
          </template>
          <!-- 按钮配置 -->
          <template v-if="activeData.__config__.tag==='Steps'">
            <el-form-item label="步骤条按钮配置" label-width="110px" />
            <el-form-item label="上一步按钮">
              <el-input v-model="activeData.__config__.up" placeholder="选项名" size="small" />
            </el-form-item>
            <el-form-item label="下一步按钮">
              <el-input v-model="activeData.__config__.down" placeholder="选项名" size="small" />
            </el-form-item>
            <el-form-item label="关闭">
              <el-input v-model="activeData.__config__.finish" placeholder="选项名" size="small" />
            </el-form-item>
            <el-form-item label="完成">
              <el-input v-model="activeData.__config__.sumbitBtn" placeholder="选项名" size="small" />
            </el-form-item>
          </template>
          <!-- 选项卡-风格类型 -->
          <el-form-item v-if="activeData.__config__.tag === 'el-tabs'" label="风格类型">
            <el-radio-group v-model="activeData.type">
              <el-radio-button label="">
                默认
              </el-radio-button>
              <el-radio-button label="card">
                选项卡
              </el-radio-button>
              <el-radio-button label="border-card">
                卡片化
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <!-- 选项卡-选项卡位置 -->
          <el-form-item v-if="activeData.__config__.tag === 'el-tabs'" label="选项卡位置">
            <el-radio-group v-model="activeData['tab-position']">
              <el-radio-button label="top">
                顶部
              </el-radio-button>
              <el-radio-button label="left">
                左侧
              </el-radio-button>
              <el-radio-button label="right">
                右侧
              </el-radio-button>
              <el-radio-button label="bottom">
                底部
              </el-radio-button>
            </el-radio-group>
          </el-form-item>

          <template v-if="activeData.__config__.layoutTree">
            <el-divider>布局结构树</el-divider>
            <el-tree
              :data="[activeData.__config__]"
              :props="layoutTreeProps"
              node-key="renderKey"
              default-expand-all
              draggable
            >
              <span slot-scope="{ node, data }">
                <span class="node-label">
                  <svg-icon class="node-icon" :icon-class="data.__config__?data.__config__.tagIcon:data.tagIcon" />
                  {{ node.label }}
                </span>
              </span>
            </el-tree>
          </template>
          <!-- <template v-if="Array.isArray(activeData.__config__.regList)"> -->
          <template v-if="['textarea', 'input'].includes(activeData.__config__.tagIcon)">
            <el-divider>正则校验</el-divider>
            <div
              v-for="(item, index) in activeData.__config__.regList"
              :key="index"
              class="reg-item"
            >
              <span class="close-btn" @click="activeData.__config__.regList.splice(index, 1)">
                <i class="el-icon-close" />
              </span>
              <el-form-item label="表达式">
                <el-input v-model="item.pattern" placeholder="请输入正则" />
              </el-form-item>
              <el-form-item label="错误提示" style="margin-bottom:0">
                <el-input v-model="item.message" placeholder="请输入错误提示" />
              </el-form-item>
            </div>
            <el-button icon="el-icon-circle-plus-outline" type="text" @click="addReg">
                添加规则
            </el-button>
          </template>
          <template v-if="activeData.__config__.tagIcon !== 'coding'">
            <el-divider>脚本事件</el-divider>
            <el-form-item label="change">
              <el-button class="jsBtn" @click="() => formJsBtnFunc('change')">发生变化时触发</el-button>
            </el-form-item>
            <el-form-item label="blur">
              <el-button class="jsBtn" @click="() => formJsBtnFunc('blur')">失去焦点时触发</el-button>
            </el-form-item>
          </template>
        </el-form>
        <!-- 表单属性 -->
        <el-form v-show="currentTab === 'form'" size="small" label-width="90px">
          <!-- <el-form-item label="表单名">
            <el-input v-model="formConf.tableName" placeholder="请输入表单名（ref）" />
          </el-form-item> -->
          <el-form-item label="表单类型">
            <el-select
              v-model="formConf.formType"
              placeholder="请选择表单类型"
              :style="{ width: '100%' }"
              clearable
            >
              <el-option label="弹出窗口" value="msgBox" />
              <el-option label="跳转页面" value="page" />
            </el-select>
          </el-form-item>
          <template v-if="formConf.formType==='msgBox'" >
            <el-form-item label="弹窗宽度">
              <el-input-number placeholder="请输入宽度" v-model="formConf.dialogWidth" size="small" :min="50" style="width:90%;"></el-input-number>
              px
            </el-form-item>
            <el-form-item label="距顶高度">
              <el-input-number placeholder="请输入高度" v-model="formConf.dialogTop" size="small" style="width:90%;"></el-input-number>
              px
            </el-form-item>
          </template>
          <!-- <el-form-item label="表单模型">
            <el-input v-model="formConf.formModel" placeholder="请输入数据模型" />
          </el-form-item>
          <el-form-item label="校验模型">
            <el-input v-model="formConf.formRules" placeholder="请输入校验模型" />
          </el-form-item> -->
          <el-form-item label="表单尺寸">
            <el-radio-group v-model="formConf.size">
              <el-radio-button label="medium">
                中等
              </el-radio-button>
              <el-radio-button label="small">
                较小
              </el-radio-button>
              <el-radio-button label="mini">
                迷你
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="标签对齐">
            <el-radio-group v-model="formConf.labelPosition">
              <el-radio-button label="left">
                左对齐
              </el-radio-button>
              <el-radio-button label="right">
                右对齐
              </el-radio-button>
              <el-radio-button label="top">
                顶部对齐
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="标签描述位置">
            <el-radio-group v-model="formConf.labelDescriptionPosition">
              <el-radio-button label="icon">
                标签图标
              </el-radio-button>
              <el-radio-button label="button">
                底部一行
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <!-- <el-form-item label="标签宽度">
            <el-input-number v-model="formConf.labelWidth" :min="1" placeholder="请输入标签宽度" style="width: 100%" />
          </el-form-item> -->
          <el-form-item label="栅格间隔">
            <el-input-number v-model="formConf.gutter" :min="0" placeholder="栅格间隔" />
          </el-form-item>
          <el-form-item label="禁用表单">
            <el-switch v-model="formConf.disabled" />
          </el-form-item>
          <el-form-item label="表单按钮">
            <el-switch v-model="formConf.formBtns" />
          </el-form-item>
          <template v-if="formConf.formBtns && formConf.btnConfig &&formConf.btnConfig.length">
            <!-- <el-divider>按钮配置</el-divider> -->
            <div class="titleFont">按钮配置</div>
            <el-form-item label="表单按钮 :" style='marginBottom:2px'></el-form-item>
              <div v-for="(item, index) in formConf.btnConfig.filter(item=>item.label!=='保存')" :key="index" class="select-item">
                <el-checkbox v-model="item.checked" style="marginLeft:10px;">{{item.label}}
                <el-input v-model="item.text" placeholder="按钮名" size="small" style="width:100px;marginRight:10px;marginLeft:10px;"/>
                </el-checkbox>
                <el-select v-model="item.type" style="width:100px">
                  <el-option v-for="(opt, index) in btnStyles" :label="opt.label" :value="opt.value" :key="index">
                    <el-link :type="opt.value" :underline="false">{{opt.label}}</el-link>
                  </el-option>
                </el-select>
              </div>
             <!-- <el-form-item  label="按钮位置" style="marginTop:20px;">
               <el-radio-group v-model="formConf.btnPosition">
                 <el-radio-button label="left">
                   左对齐
                 </el-radio-button>
                 <el-radio-button label="center">
                   居中
                 </el-radio-button>
                 <el-radio-button label="right">
                   右对齐
                 </el-radio-button>
               </el-radio-group>
             </el-form-item> -->
          </template>
          <template>
            <el-form-item label="表单规则" style='marginBottom:2px'>
              <div @click="editFormRule" style="display: flex">
                <div class="iconAdd" style="marginTop:6px">
                  <i class="el-icon-plus"></i> 
                </div>
                <!-- <el-button type="primary" icon="el-icon-plus" circle size="mini" style="borderRadius: 50%;padding:12px"></el-button> -->
                <span style="color:#409eff;cursor:pointer;" >添加规则</span>
              </div>
            </el-form-item>
            <div style="minHeight:100px;border:1px solid #DCDFE6;margin:0px 0px 10px 20px;">
              <draggable v-if="formConf.ruleConfig&&formConf.ruleConfig.length > 0" :list="formConf.ruleConfig" :animation="340" group="selectBtn" handle=".option-drag">
                <div v-for="(item, index) in formConf.ruleConfig" :key="index" style="display:flex;alignItems:center;fontSize:14px;padding:5px;justifyContent:space-between">
                  <div style="width:24%;">批次:{{item.basic.order}}</div>
                  <div style="width:50%;overflow:hidden;whiteSpace:nowrap;textOverflow:ellipsis;">名称:{{item.basic.name}}</div>
                  <div style="width:24%;">
                    <i class="el-icon-setting" style="padding:0 5px;" @click="editFormRule(item,index)" />
                    <i class="el-icon-delete" style="padding:0 5px;" @click="()=>{formConf.ruleConfig.splice(index,1)}" />
                    <i class="el-icon-rank  option-drag" style="paddingLeft:5px;" />
                  </div>
                </div>
              </draggable>
              <div v-else style="textAlign:center;height: 127px">
                <img src="@/assets/images/empty.png" alt="" style="margin-top: 23px;">
                <div class="title-no">暂无规则</div>
              </div>
            </div>
          </template>
          <el-form-item label="显示未选中组件边框" label-width="150px">
            <el-switch v-model="formConf.unFocusedComponentBorder" />
          </el-form-item>
          <template>
            <el-divider>脚本事件</el-divider>
            <el-form-item label="onLoad">
              <el-button class="jsBtn" @click="() => formJsBtnFunc('onLoad')">表单加载触发</el-button>
            </el-form-item>
            <el-form-item label="beforeSubmit">
              <el-button class="jsBtn" @click="() => formJsBtnFunc('before')">提交前置触发</el-button>
            </el-form-item>
            <el-form-item label="afterSubmit">
              <el-button class="jsBtn" @click="() => formJsBtnFunc('after')">提交后置触发</el-button>
            </el-form-item>
          </template>
        </el-form>
      </el-scrollbar>
    </div>
    <el-dialog title="设置按钮" :visible.sync="btnSettingVisible" width="600px">
      <el-form :model="btnSetting" label-width="80px">
        <el-form-item label="按钮名称" :rules="[{required:true,message:'请输入按钮名称',trigger:'blur'}]">
          <el-input v-model="btnSetting.text" placeholder="按钮名" size="small" />
        </el-form-item>
        <el-form-item label="按钮位置" :rules="[{required:true,message:'请选择按钮位置',trigger:'blur'}]">
          <el-radio-group v-model="btnSetting.position" :disabled="btnSetting.label==='批量删除'">
            <el-radio-button label="table" :disabled='btnSetting.onlyInline'>表格操作</el-radio-button>
            <el-radio-button label="inline" :disabled='btnSetting.onlyTable'>行内操作</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="按钮颜色" :rules="[{required:true,message:'请选择按钮颜色',trigger:'blur'}]">
          <el-select v-model="btnSetting.type" style="width:100%" size="small">
            <el-option v-for="(opt, index) in btnStyles" :label="opt.label" :value="opt.value" :key="index">
              <el-link :type="opt.value" :underline="false">{{opt.label}}</el-link>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-dialog>
    <treeNode-dialog :visible.sync="dialogVisible" title="添加选项" @commit="addNode"  ref="treeNode"/>
    <icons-dialog :visible.sync="iconsVisible" :current="activeData[currentIconModel]" @select="setIcon" />
    <dynamic-datasource-dialog v-if="dialogDynamicVisible" @close="()=>{dialogDynamicVisible=false}" @commit="addLevelNode"
      :fields="activeData.fields" :formName="activeData.formName">
    </dynamic-datasource-dialog>
    <rule-config-dialog ref="ruleDialog" :ruleConfig="formConf.ruleConfig" v-if="formRuleVisible" :fields="fields" @commit="addFormRule" @update="updateFormRule" @close="()=>{formRuleVisible = false}"></rule-config-dialog>
    <!-- 联动数据弹框 -->
    <div v-if="showSettingDialog">
        <SettingLinkDataDialog :fields="fields" :activeData="activeData"
            :curFormParamsOptions="curFormParamsOptions"
            @closeSettingDialog="closeSettingDialog">
        </SettingLinkDataDialog>
    </div>
    <!-- 关联数据弹框 -->
    <div v-if="showRelatedDialog">
        <SettingRelatedDialog :fields="fields" :activeData="activeData"
            :curFormParamsOptions="curFormParamsOptions"
            @closeRelatedDialog="closeRelatedDialog">
        </SettingRelatedDialog>
    </div>
    <!-- 公式编辑 -->
    <div v-if="showFormulaDialog">
        <FormulaDialog :drawingList="drawingList" :activeData="activeData" @closeFormulaDialog="closeFormulaDialog"></FormulaDialog>
    </div>
    <!-- 值来源设置 -->
     <div v-if="showValueDialog">
         <SettingValueDialog :fields="fields" :activeData="activeData"
            :curFormParamsOptions="curFormParamsOptions"
            :drawingList="drawingList"
            @closeValueDialog="closeValueDialog">
        </SettingValueDialog>
    </div>
    <!-- js表单脚本事件弹框 -->
    <div v-if="showFormJsDialog">
        <FormJS
            @closeJsDialog="closeJsDialog"
            :drawingList="drawingList"
            :newFormName="newFormName"
            :curEditorVal="curEditorVal"
            @confirmJsDialog="confirmJsDialog">
        </FormJS>
    </div>
  </div>
</template>

<script>
import { isArray, log } from 'util'
    import TreeNodeDialog from './TreeNodeDialog'
    import DynamicDatasourceDialog from './DynamicDatasourceDialog'
    import RuleConfigDialog from './RuleConfigDialog'
    import { isNumberStr, makeRandom } from '@/utils/index'
    import IconsDialog from './IconsDialog'
    import {
    inputComponents, selectComponents, layoutComponents,organizationComponents
    } from '@/components/generator/config'
    import { saveFormConf } from '@/utils/db'
    import draggable from 'vuedraggable'
    import {find} from 'lodash'
    import {getTableNameListForm,getAllForm,getTableColumn,getDictName,getMdColumnsByTableIdUsingGET,listchoose,sourceTestList} from '@/api/custom/formDesigner'
    import {getTableData,getTableAllData,getTableFields,getFieldColumn} from "@/api/custom/lenovoPopup.js";
    import path from 'path';
    import {toChineseNum} from '@/utils/toChineseNum'
    import {
    getMainList,
    getAutomaticCode
    } from "@/api/custom/autoCoding";
    import SettingLinkDataDialog from './SettingLinkDataDialog.vue'
    import SettingRelatedDialog from './SettingRelatedDialog.vue'
    import FormulaDialog from './FormulaDialog.vue'
    import formulaIcon from '@/icons/svg/formula.svg'
    import SettingValueDialog from './SettingValueDialog.vue'
    import { Message } from 'element-ui'
    import picSelectOne from '../../../../assets/images/picSelect1.png'
    import picSelectTwo from '../../../../assets/images/picSelect2.png'
    import picSelectThird from '../../../../assets/images/picSelect3.png'
    import FormJS from '@/views/custom/formdesign/components/FormJS'
    const dateTimeFormat = {
    date: 'yyyy-MM-dd',
    week: 'yyyy 第 WW 周',
    month: 'yyyy-MM',
    year: 'yyyy',
    datetime: 'yyyy-MM-dd HH:mm:ss',
    daterange: 'yyyy-MM-dd',
    monthrange: 'yyyy-MM',
    datetimerange: 'yyyy-MM-dd HH:mm:ss'
    }
    const defaultRules = [
    {label: '手机号码',value:'phone'},
    {label:'邮箱',value:'email'},
    {label:'身份证号',value:'idcard'},
    {label:'汉字',value:'hanzi'},
    {label:'数字',value:'num'},
    {label:'整数',value:'int'},
    {label:'浮点数',value:'decimal'},
    {label:'URL',value:'url'}
    ]
    const defaultRulesItem ={
    phone:{pattern:'/^1(3|4|5|7|8|9)\\d{9}$/',message:'请输入大陆手机号'},
    email:{pattern:'/^[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/',message:'请输入邮箱地址'},
    idcard:{pattern:'/(^\\d{18}$)|(^\\d{17}(\\d|X|x)$)/',message:'请输入身份证号'},
    hanzi:{pattern:'/^[\\u4e00-\\u9fa5]{0,}$/',message:'请输入汉字'},
    num:{pattern:'/^[0-9]+([.]{1}[0-9]+){0,1}$/',message:'请输入数字'},
    int:{pattern:'/^\\d*$/',message:'请输入整数'},
    double:{pattern:'/^-?([1-9]\\d*\\.\\d*|0\\.\\d*[1-9]\\d*|0?\\.0+|0)$/',message:'请输入浮点数'},
    decimal:{pattern:'/^-?([1-9]\\d*\\.\\d*|0\\.\\d*[1-9]\\d*|0?\\.0+|0)$/',message:'请输入浮点数'},
    url:{pattern:'/^[a-zA-Z]+:[/]{2}\\S*$/',message:'请输入URL'}
    }
    // 使changeRenderKey在目标组件改变时可用
    const needRerenderList = ['tinymce','signature']
export default {
  components: {
    FormJS,
    TreeNodeDialog,
    IconsDialog,
    draggable,
    DynamicDatasourceDialog,
    RuleConfigDialog,
    SettingLinkDataDialog,
    SettingRelatedDialog,
    FormulaDialog,
    SettingValueDialog
  },
  props: ['showField', 'activeData', 'formConf','fields', 'drawingList', 'newFormName'],
  data() {
    return {
        isTreeFather: false,
        jsView: '',
        curEditorVal: '',
        showFormJsDialog: false,
        curPicIndex: 0,
        curRow: -1,
        localStorageTemp: '',
        tenantId: '',
        loadAction: '',
        api: '',
        picSelectList: [picSelectOne, picSelectTwo, picSelectThird],
        // 不需要展示 重复校验 选项的组件
        noRepeatVerify: ['Subform', 'TitleLine', 'el-tabs', 'Steps', 'el-collapse', 'el-card','el-upload'],
        dateFormatOptions: [
            // {
            //     label: '年-月',
            //     value: 'yyyy-MM'
            // }, 
            {
                label: '年',
                value: 'yyyy'
            },
            {
                label: '日期时间',
                value: 'yyyy-MM-dd HH:mm:ss'
            }
        ],
        dateRangeOptions: [
            {
                label: '年',
                value: 'yyyy'
            },
             {
                label: '年-月',
                value: 'yyyy-MM'
            },
            {
                label: '年-月-日',
                value: 'yyyy-MM-dd'
            }, 
            {
                label: '年-月-日 时:分:秒',
                value: 'yyyy-MM-dd HH:mm:ss'
            }
        ],
        checkedNodes:[], //树形结构所有选中的节点
        ids:[], //选中节点的id
        showFakeNumber:999999,
        formulaIcon: formulaIcon,
        showFormulaDialog: false,
        noShowDefaultList: ['el-collapse', 'Subform', 'TitleLine', 'Steps', 'el-card', 'el-tabs'],
        showSettingDialog: false,
        showRelatedDialog: false,
        currentTab: 'field',
        currentNode: null,
        dialogVisible: false,
        dialogDynamicVisible: false, //显示动态数据源配置弹窗
        iconsVisible: false,
        currentIconModel: null,
        showValueDialog: false, // 值来源设置
        defaultRules: defaultRules,
        tableOptions: [], //数据库表
        fieldOptions: [], //数据字段
        dictOptions: [], //字典
        allTables: [], //数据库表
        tableColumns: [], //数据字段
        // dictNames: [], //字典
        dateTypeOptions: [
            // {
            // label: '日(date)',
            // value: 'date'
            // },
            // {
            // label: '周(week)',
            // value: 'week'
            // },
            {
            label: '月(month)',
            value: 'month'
            },
            {
            label: '年(year)',
            value: 'year'
            },
            {
            label: '日期时间(datetime)',
            value: 'datetime'
            }
        ],
        defaultValueNumberOptions: [
            {
                label: '固定值',
                value: 'staticValue'
            },
            {
                label: '联动数据',
                value: 'linkData'
            },
            {
                label: '公式编辑',
                value: 'formula'
            },
        ],
        defaultValueOptions: [
            {
                label: '固定值',
                value: 'staticValue'
            },
            {
                label: '联动数据',
                value: 'linkData'
            },
        ],
        dateRangeTypeOptions: [
            {
            label: '日期范围(daterange)',
            value: 'daterange'
            },
            {
            label: '月范围(monthrange)',
            value: 'monthrange'
            },
            {
            label: '日期时间范围(datetimerange)',
            value: 'datetimerange'
            }
        ],
        btnConfig : {
            insert: {
            label: '添加',
            text: '添加',
            method: 'insertData',
            position: 'table',
            type: 'primary',
            onlyTable:true,
            command:"insert"
            },
            del: {
            label: '删除',
            text: '删除',
            method: 'delData',
            position: 'inline',
            iconType: 'el-icon-delete',
            type: 'danger',
            command:"del"
            },
            // view: {
            //   label: '查看',
            //   text: '查看',
            //   method: 'viewData',
            //   position: 'inline',
            //   type: 'primary'
            // },
            edit: {
            label: '编辑',
            text: '编辑',
            method: 'editData',
            position: 'inline',
            type: 'primary',
            iconType: 'el-icon-edit',
            onlyInline:true,
            circle: 'circle',
            command:"edit"
            },

            copyData: {
            label: '复制',
            text: '复制',
            method: 'copyData',
            position: 'inline',
            type: 'primary',
            onlyInline:true,
            iconType: 'el-icon-document-copy',
            command:"copyData"
            },
            import: {
            label: '导入',
            text: '快速导入',
            method: '',
            position: 'table',
            type: 'default',
            onlyTable:true,
            command:"import"
            },
            export: {
            label: '导出',
            text: '快速导出',
            method: 'exportToExcel',
            position: 'table',
            type: 'default',
            onlyTable:true,
            command:"export"
            },
            moveUp: {
            label: '上移',
            text: '上移',
            method: 'approvalData',
            position: 'inline',
            type: 'primary',
            onlyInline:true,
            circle: 'circle',
            iconType: 'el-icon-top',
            command:"moveUp"
            },
            moveDown: {
            label: '下移',
            text: '下移',
            method: 'multiDel',
            position: 'inline',
            type: 'primary',
            onlyInline:true,
            circle: 'circle',
            iconType: 'el-icon-bottom',
            command:"moveDown"
            }
        },
        colorFormatOptions: [
            {
            label: 'hex',
            value: 'hex'
            },
            {
            label: 'rgb',
            value: 'rgb'
            },
            {
            label: 'rgba',
            value: 'rgba'
            },
            {
            label: 'hsv',
            value: 'hsv'
            },
            {
            label: 'hsl',
            value: 'hsl'
            }
        ],
        justifyOptions: [
            {
            label: 'start',
            value: 'start'
            },
            {
            label: 'end',
            value: 'end'
            },
            {
            label: 'center',
            value: 'center'
            },
            {
            label: 'space-around',
            value: 'space-around'
            },
            {
            label: 'space-between',
            value: 'space-between'
            }
        ],
        defaultSelectOptions:[
            {
            label: '固定值',
            value: 'stickValue'
            },
            {
            label: '预设值',
            value: 'presetValue'
            },
        ],
        PresetContent:[
            {
            label:'用户',
            content:'当前用户'
            },
            {
            label:'部门',
            content:'当前部门'
            },
            {
            label:'岗位',
            content:'当前岗位'
            },
        ],
        btnStyles: [{
            label: '默认',
            value: 'default'
        },
        {
            label: '主要',
            value: 'primary'
        },
        {
            label: '成功',
            value: 'success'
        },
        {
            label: '信息',
            value: 'info'
        },
        {
            label: '警告',
            value: 'warning'
        },
        {
            label: '危险',
            value: 'danger'
        },

        ],
        layoutTreeProps: {
            label(data, node) {
            const config = data.__config__
            return data.componentName || (config && `${config.label}: ${data.__vModel__}`)
            }
        },
        rulesArray:[],
        btnSettingVisible: false,
        btnSetting: {},
        curTreeId: -1,
        curLabelValue: '',
        curFormParamsOptions: [], // 设置联动数据使用
        formRuleVisible: false, //显示表单规则配置弹窗
    }
  },
  mounted(){
    getMainList({pageNo:1,pageSize:49,encodeName:''}).then((res)=>{
      this.rulesArray=res.data.list
    })
    this.handlerNumberFmt()
  },
  created () {
    this.api = process.env.VUE_APP_BASE_API;
    this.loadAction = `${this.api}/admin-api/infra/file/upload`;
    this.localStorageTemp = window.localStorage.getItem('ACCESS_TOKEN');
    this.tenantId = window.localStorage.getItem('TENANT_ID')
  },
  computed: {
    showType () {
        if (this.activeData.format === 'yyyy-MM-dd HH:mm:ss') {
            return 'datetimerange'
        } else if (this.activeData.format === 'yyyy-MM-dd') {
            return 'daterange'
        } else if (this.activeData.format === 'yyyy-MM') {
            return 'monthrange'
        }
    },
    timeValue: {
        set (newVal) {
            this.$set(this.activeData['picker-options'], 'selectableRange', newVal?.join(' - '))
        },
        get () {
            return this.activeData['picker-options'].selectableRange
        }
    },
    dateValue: {
        set (newVal) {
              if(this.activeData.format === 'yyyy-MM-dd HH:mm:ss'){// 年月日 时分秒
                this.$set(this.activeData['picker-options'], 'customSelectableRange', newVal)
              }else{
                this.$set(this.activeData['picker-options'], 'customSelectableRange', newVal.join(':'))
              }
              const min = new Date(newVal && newVal[0]).getTime()
              const max = new Date(newVal && newVal[1]).getTime()
              this.activeData['picker-options'].minDate = min
              this.activeData['picker-options'].maxDate = max
              // 禁用日期范围
              this.activeData['picker-options'].disabledDate = function (time) {
                  return time.getTime() > max || time.getTime() < min - 8.64e7 
              }
        },
        get () {
            if (this.activeData.__config__.tagIcon === 'date-range') {
                return this.activeData['picker-options'].customSelectableRange?.split(':')
            } else {
                return this.activeData['picker-options'].customSelectableRange
            }
        }
    },
    documentLink() {
      return (
        this.activeData.__config__.document
        || 'https://element.eleme.cn/#/zh-CN/component/installation'
      )
    },
    sortList(){
      return this.activeData.__config__.children[0].__config__.children
    },
    dateOptions() {
      if (
        this.activeData.type !== undefined
        && this.activeData.__config__.tag === 'el-date-picker'
      ) {
        if (this.activeData['start-placeholder'] === undefined) {
          return this.dateTypeOptions
        }
        return this.dateRangeTypeOptions
      }
      return []
    },
    tagList() {
      return [
        {
          label: '输入型组件',
          options: inputComponents
        },
        {
          label: '选择型组件',
          options: selectComponents
        },
        // {
        //   label: '布局型组件',
        //   options: layoutComponents
        // },
        {
          label: '组织结构组件',
          options: organizationComponents
        }
      ]
    },
    activeTag() {
      return this.activeData.__config__.tag
    },
    isShowMin() {
      return ['el-input-number', 'el-slider'].indexOf(this.activeTag) > -1
    },
    isShowMax() {
      return ['el-input-number', 'el-slider', 'el-rate'].indexOf(this.activeTag) > -1
    },
    isShowStep() {
      return ['el-input-number', 'el-slider'].indexOf(this.activeTag) > -1
    }
  },
  watch: {
    formConf: {
      handler(val) {
        saveFormConf(val)
      },
      deep: true
    },
    'activeData.__vModel__': {  //有数据源的组件获取字典或动态数据选项
      handler(val) {
        if (this.activeData.dictName&&this.activeData.dictName!=='') {
          this.getDictList()
        }
        if(this.activeData.dataType&&this.activeData.dataType==='datasource'){
          this.getTableName()
          // this.getAllTableName()
          if (this.activeData.tableName&&this.activeData.tableName !== ''){
            this.getFieldName(this.activeData.tableName)
          }
        }
      },
      immediate: true
    },
  },
  methods: {
    changeIslimit(val) {
      if(!val && this.activeData.__config__.tagIcon ==="time"){ //关闭限制 时间选择
        this.activeData['picker-options'].selectableRange = '00:00:00 - 23:59:59'
      }
      if(!val && (this.activeData.__config__.tagIcon === "date" || this.activeData.__config__.tagIcon === "date-range" )){ //关闭限制 日期选择 日期范围
        this.activeData['picker-options'].disabledDate = false
      }
    },
    formJsBtnFunc (flag) {
        this.jsView = flag
        if (flag === 'onLoad') {
            this.curEditorVal = this.formConf.formJs?.onLoad || ''
        } else if (flag === 'before') {
            this.curEditorVal = this.formConf.formJs?.beforeSubmit || ''
        } else if (flag === 'after') {
            this.curEditorVal = this.formConf.formJs?.afterSubmit || ''
        } else if (flag === 'change') {
            this.curEditorVal = this.activeData?.change || ''
        } else if (flag === 'blur') {
            this.curEditorVal = this.activeData?.blur || ''
        }
        this.showFormJsDialog = true
    },
    confirmJsDialog (editorValue) {
        this.$emit('changeFormConf', this.jsView, editorValue)
        this.jsView = ''
        this.closeJsDialog()
    },
    closeJsDialog () {
        this.showFormJsDialog = false
    },
    tableNameValidator(){
      if(this.activeData.maxlength >1225) {
        this.activeData.maxlength = ''
        this.$message.warning('输入统计最大输入不能超过1225，请重新输入')
      }
    },
    radioPicChange (val) {
        this.activeData.__config__.defaultValue = val
    },
    checkPicChange (val) {
        const tempList = []
        this.activeData.options.forEach(pic => {
            if (pic.checked) {
                tempList.push(pic.id)
            }
        })
        this.activeData.__config__.defaultValue = tempList.join(',')
    },
    setRowIndex (index) {
        this.curRow = index
    },
    // 上传成功钩子事件
    uploadSuccess (response, file, fileList) {
        if (response.code === 0) {
            this.$set(this.activeData.options[this.curRow], 'value', response.data)
        } else {
            this.$message.error(response.msg)
        }
    },
    addPictureItem() {
        if (this.curPicIndex > 2) {
            this.curPicIndex = 0
        }
        this.activeData.options.push({
            id: makeRandom(),
            label: `未命名${this.activeData.options.length + 1}`,
            value: this.picSelectList[this.curPicIndex],
            checked: false
        })
        this.curPicIndex++
        this.$nextTick(() => {
            // 滚动到最底部
            var element = document.getElementById("picDiv");
            element.scrollTop = element.scrollHeight;
        })
    },
    handlerNumberFmt () {
        if (this.activeData.__config__.tag === 'el-number') {
            this.showFakeNumber = 999999
            // 是否保留小数位数
            if (this.activeData.__config__.isDecimal) {
                // 保留的位数
                if (this.activeData.__config__.decimalPlaces > 0) {
                    this.showFakeNumber = this.showFakeNumber + '.' + '0'.repeat(this.activeData.__config__.decimalPlaces)
                    // 是否补零
                    if (this.activeData.__config__.zeroPadding) {
                            
                    }
                    // 是否四舍五入
                    if (this.activeData.__config__.rounding) {

                    }
                }
            }
            // 是否展示千分符
            if (this.activeData.__config__.showThousands) {
                this.showFakeNumber = this.thousandSplit(this.showFakeNumber)
            }
            // 百分比展示模式
            if (this.activeData.__config__.numberType !== 'number') {
                this.activeData.__config__.decimalPlaces = 2
                this.showFakeNumber += '%'
            }
        }
    },
    // 千分符
    thousandSplit(s) {
        const str = s.toString()
        const reg = str.indexOf('.') > -1 ? /(\d{1,3})(?=(\d{3})+\.)/g : /(\d{1,3})(?=(\d{3})+$)/g;
        return str.replace(reg, '$1,')
    },
      // 子表单 设置默认值
    settingValuekData() {
      this.showValueDialog = true
    },
    closeValueDialog(obj) {
      this.showValueDialog = false
      if(obj){
        this.activeData.__config__.valueConfig = obj
        let arr = [],arr1=[] //arr -- label  arr1 -field字段 
        this.activeData.__config__.children[0].__config__.children.filter((_) => arr.push(_.__config__.label))
        this.activeData.__config__.children[0].__config__.children.filter((_) => arr1.push(_.__vModel__))
        if(!obj.__config__.defaultValue || (obj.__config__.defaultValue &&obj.__config__.defaultValue.length == 0)) {
           this.$message.warning('请先选择')
           return
        }
        const tableId = this.setDefaultValue(obj.__config__.defaultValue)
        getMdColumnsByTableIdUsingGET(tableId).then((res) => {
          if(res.code === 0){
              if(res.data.length > 0){
                let keys = Object.keys(res && res.data && res.data[0])
                let commonLis = arr1.filter(item => keys.indexOf(item) > -1)
                if(commonLis.length == 0){   // 匹配不是 数据为 []
                    this.activeData.tableData = []
                }else{
                  // res.data.forEach((item, index) => {
                  //   for (var i = 0; i < arr.length; i++) {
                  //       item[arr1[i]] = item[arr[i]]
                  //       delete item[arr[i]]; //将修改的旧属性名删除
                  //     }
                  // })
                  this.activeData.tableData = [...res.data]
                }
              }else{
                this.activeData.tableData = []
              }
          }
        })
      }
    },
    changeValueForm() {
      this.showValueDialog = false
    },
    // 关闭联动数据弹框
    closeSettingDialog (obj) {
        this.showSettingDialog = false
        if (obj) {
            this.activeData.__config__.linkObj = { ...obj }
        }
    },
    // 关闭关联数据弹框
    closeRelatedDialog (obj) {
        this.showRelatedDialog = false
        if (obj) {
            this.activeData.__config__.relatedData = { ...obj }
        }
    },
    // 关闭公式弹框
    closeFormulaDialog (formulaStr) {
        this.showFormulaDialog = false
        if (formulaStr === false) {
            return
        }
        this.activeData.__config__.formulaStr = formulaStr
    },
    // 联动数据
    settingLinkData () {
        this.showSettingDialog = true
    },
    // 公式编辑
    formulaFunc () {
        this.showFormulaDialog = true
    },
    // 关联数据
    settingRelatedData () {
        this.showRelatedDialog = true
    },
    //更改placeholder    （避免每次编辑保存后标签都拼接到placeholder后面，内容重复，例：请输入姓名姓名姓名）
    changePlaceholder(val) {
      let isInput = inputComponents.filter((item)=>{
       return item.__config__.tag === this.activeData.__config__.tag
      })
      if (isInput.length > 0) {  //输入型组件
        this.activeData.placeholder = `请输入${val}`
      } else { //选择型组件
        this.activeData.placeholder = `请选择${val}`
      }
    },
    hideBtn(val){
      if(find(this.activeData.options,{label:val.label})) return true
      return false
    },
     setBtn(item) {
        this.btnSetting = item
        this.btnSettingVisible = true
      },
     addOptionBtn(e){
      this.activeData.options.push(
         {...this.btnConfig[e]}
      )
      let arr=[]
      for(let btn in this.btnConfig){
        this.activeData.options.forEach(item1=>{
          if(this.btnConfig[btn].label===item1.label){
            arr.push(item1)
          }
        })
      }
      this.activeData.options=arr
    },
    changeRulesValue(val){
      let listenField = {}  //监听的字段
      if(!val){
        this.activeData.__config__.required=false
      }
      this.rulesArray.map((item,index)=>{
        if(item.id === val){
          item.applyFieldList.map((i,index)=>{
            listenField[i.id] = ''
          })
        }
      })
      let params = {
        column:this.activeData.oldData?.name,
        encodeId:val,
        tableName:'',
        monitorMap:listenField
      }
      getAutomaticCode(params).then((res)=>{
       if(res.code===0) this.activeData.__config__.defaultValue=res.data.showData
       this.activeData.disabled = true;
      })
    },
    removeOption(index) {
      if (this.activeData.__slot__.options.length > 2) {
        this.activeData.__slot__.options.splice(index, 1)
        this.activeData.__config__.children.splice(index, 1)
      } else {
        this.$message({
          message: '步骤数不能小于2',
          type: 'warning'
        })
      }
    },
    removeBtnOption(index){
      this.activeData.options.splice(index, 1)
    },
    defaultValueChange(val){
      this.activeData.defaultValueKey=val
      this.activeData.defaultKey=val
    },
    defaultBtn(){
      this.activeData.dialogIsShow=true
      setTimeout(()=>{
        this.activeData.dialogIsShow=false
      },1000)
      this.$refs.selectBox.blur()
    },
    // 联想弹窗获取所有表名
    // getAllTableName(){
    //   getTableData().then((res)=>{
    //     // console.log('联想弹窗获取所有表名')
    //     if(res.code===0){
    //       this.allTables=res.data.map(item=>{
    //         return {
    //           label:item,
    //           value:item
    //         }
    //       })
    //     }
    //   })
    // },
    //获取表中所有字段
    getTableField(name){
      // console.log('获取表中所有字段')
      getTableFields(name).then(res=>{
        this.tableColumns=res.data.map(item=>{
          return {
            label:item.column,
            value:item.columnName
          }
        })
      })
    },
    //获取筛选后表中所有字段
    getFieldColumns(name){
      getFieldColumn(name).then(res=>{
        this.tableColumns=res.data.map(item=>{
          return {
            label:item.column,
            value:item.columnName
          }
        })
      })
    },
    //获取所有表单
    getTableName() {
      listchoose().then((res) => {
        if (res.code === 0) {
          this.tableOptions = res.data.map((item)=>{
            return {
              label:item.name,
              value:item.id
            }
          })
        }
      }).catch(e=>console.log(e))
    },
    //获取表字段
    getFieldName(id) {
      sourceTestList(id).then((res) => {
        if (res.code === 0) {
          this.fieldOptions = res.data?.columns.map((item) => {
            return {label:item.name,value:item.name}
          })
        }
      }).catch(e=>console.log(e))
    },
    //获取字典
    getDictList() {
      getDictName().then((res) => {
        if (res.code === 0) {
          this.dictOptions = res.data.map((item) => {
          return {
            label: item.name,
            value: item.type
          }
        })
        }
      }).catch(e=>console.log(e))
    },
    changeDataTypeLenovo(val) {
      if (val === 'dictionary') {  //字典类型数据
         this.getDictList() //获取字典
       } else if (val === 'datasource') { //动态数据源
         this.getTableName() //获取所有表
         if (this.activeData.tableName !== '' && this.activeData.tableName !== undefined) {
            this.getFieldName(this.activeData.tableName)  //获取表字段
         }
       }
    },
    //改变数据源类型
    changeDataType(val) {
       if (val === 'dictionary') {  //字典类型数据
         this.getDictList() //获取字典
       } else if (val === 'datasource') { //动态数据源
         this.getTableName() //获取所有表
         
         if (this.activeData.tableName !== '') {
            this.getFieldName(this.activeData.tableName)  //获取表字段
         }
       }
    },
    // changeTableDataType(val){
    //    if (val === 'dictionary') {
    //     //  this.getDictList()
    //    } else if (val === 'datasource') {
    //      this.getAllTableName()
    //    }
    // },
    changeTable(val){
       this.getFieldName(val)  //获取表字段
    },

    addReg() {
      this.activeData.__config__.regList.push({
        pattern: '',
        message: ''
      })
    },
    addDefaultReg(val) {
      if(!defaultRulesItem[val]){ //清空格式 或者
        this.activeData.__config__.regList = [{
          pattern: '',
          message: ''
        }]
      }else{
        this.activeData.__config__.regList = []
        this.activeData.__config__.regList.push(defaultRulesItem[val])
      }
    },
    addSelectItem() {
        if (this.activeData.__config__.tag === 'Steps') {
          if(this.activeData.__slot__.options.length === 5){
            this.$message.warning('最多只能添加5步')
          }else{
            this.activeData.__slot__.options.push({
                title: '步骤' + toChineseNum(this.activeData.__slot__.options.length + 1)
            })
          }
        } else {
            this.activeData.__slot__.options.push({
              label: '',
              value: ''
            })
        }
        this.activeData.__config__.children.push(
          {
            __config__: {
              layout: 'rowFormItem',
              tagIcon: 'row',
              label: '行容器',
              layoutTree: false,
              document: 'https://element.eleme.cn/#/zh-CN/component/layout#row-attributes',
            },
            type: 'default',
            justify: 'start',
            align: 'top',
            componentName: 'el-row',
            itemBtns: false
          }
        )
       this.$emit('transStep', this.activeData)
    },
    //静态数据，添加默认填充
    addMySelectItem() {
      this.activeData.optionMax ++
      this.activeData.options.push({
        label: `选项${toChineseNum(this.activeData.optionMax)}`,
        value: this.activeData.optionMax,
        checked:false
      })
    },
    DelSelectItem(){
      let arr = [] //要删除的元素下标
      this.activeData.options.map((item,index)=>{
        if(item.checked){
          arr.push(index)
        }
      })
      if(arr.length>0){
        for(let i = arr.length -1;i>=0;i--){
          this.activeData.options.splice(arr[i],1)
        }
      }else{
        this.$message.warning('请至少选中一条数据')
      }
    },
    addTreeItem() {
      ++this.idGlobal
      this.dialogVisible = true
      this.isTreeFather = true
      this.currentNode = this.activeData.options
    },

    //获取选中的节点的id
    getChildrenNodes() {
      this.checkedNodes = this.$refs['tree-menu'].getCheckedNodes()
      this.checkedNodes.forEach(item => {
        this.ids.push(item.id)
      })
    },
    // 删除方法
    deletedId(data, ids) {
      for (var m = 0, n = data.length; m < n; m++) {
        for (var i = 0, j = ids.length; i <j; i++) {
          if (data[m] && data[m].id === ids[i]) {
            data.splice(m, 1)
          }
        }
        if (data[m] && data[m].children?.length > 0) {
          this.deletedId(data[m].children, ids)
        }
      }
      return data
    },
    // 点击按钮删除
    delTreeItem() {
      this.getChildrenNodes()
      if(this.ids.length>0){
        this.deletedId(this.activeData.options, this.ids)
        this.$refs['tree-menu'].setCheckedKeys([]);
      }else{
        this.$message.warning('请至少选中一个选项')
      }
      
    },

    renderContent(h, { node, data, store }) {
      return (
        <div class="custom-tree-node">
          {this.curTreeId !== node.id && <span class="labelSpanCss" title={node.label}>{node.label}</span>}
          {this.curTreeId === node.id && <el-input v-model={this.curLabelValue} ref='labelInput' class="labelInputCss" onBlur={() => {this.blurLabel(data)}}></el-input>}
          <span class="node-operation">
            <i on-click={() => this.append(data)}
              class="el-icon-plus"
              title="添加"
            ></i>
            <i on-click={() => this.edit(data, node)}
              class="el-icon-edit"
              title="编辑"
            ></i>
            <i on-click={() => this.remove(node, data)}
              class="el-icon-delete"
              title="删除"
            ></i>
          </span>
        </div>
      )
    },
    blurLabel (data) {
        this.$set(data, 'label', this.curLabelValue)
        this.curTreeId = -1
    },
    edit (data, node) {
        this.curTreeId = node.id
        this.curLabelValue = data.label
        this.$nextTick(() => {
            this.$refs['labelInput'].focus()
        })
    },
    append(data) {
      this.isTreeFather = false
      if (!data.children) {
        this.$set(data, 'children', [])
      }
      this.dialogVisible = true
      this.currentNode = data.children
    },
    remove(node, data) {
      this.activeData.__config__.defaultValue = [] // 避免删除时报错
      const { parent } = node
      const children = parent.data.children || parent.data
      const index = children.findIndex(d => d.id === data.id)
      children.splice(index, 1)
    },
    addNode(data) {
      if(this.isTreeFather){ //添加父级
        let idList =[]
         this.activeData.options?.map((item) => {
          idList.push(item.value)
        })
        if(idList.indexOf(data.value) === -1){
          this.currentNode.push(data)
          this.$refs.treeNode.close()
        }else{ //父级value重复 提醒
          Message.error('父级选项值重复')
        }
      }else{
        this.currentNode.push(data)
        this.$refs.treeNode.close()
      }
      
    },
    //保存级联动态数据源配置
    addLevelNode(data,formName) {
      this.activeData.fields = data
    //   this.activeData.formName = formName
    },
    //显示表单规则弹窗
    editFormRule(data,index) {
      this.formRuleVisible = true
      this.$nextTick(()=>{
        this.$refs.ruleDialog.init(data,index)
      })
    },
    //添加表单规则
    addFormRule(basic,formrule,method,config) {
      this.formConf.ruleConfig.push({
        basic, formrule, method, hide:config.hide, show:config.show, onlyHidden: config.onlyHidden, onlyDisplay: config.onlyDisplay
      })
    },
    //修改表单规则
    updateFormRule(basic,formrule,method,config,index) {
      this.formConf.ruleConfig[index] = {
        basic,formrule,method,hide:config.hide,show:config.show, onlyHidden: config.onlyHidden, onlyDisplay: config.onlyDisplay
      }
    },
    setOptionValue(item, val) {
      item.value = isNumberStr(val) ? +val : val
    },
    setPicLabel (val, idx) {
        this.$set(this.activeData.options[index], 'label', val)
        // item.label = val
    },
    setDefaultValue(val) {
      if (Array.isArray(val)) {
        return val.join(',')
      }
      // if (['string', 'number'].indexOf(typeof val) > -1) {
      //   return val
      // }
      if (typeof val === 'boolean') {
        return `${val}`
      }
      if(typeof val === 'string'){
        if(val && val.indexOf('undefined') > -1 && this.activeData.__config__.tag ==='el-number') { //避免开启补零。固定值出现 undefined.000
          return ''
        }
      }
      return val
    },
    onDefaultValueInput(str) {
      // console.log(str)
      if (isArray(this.activeData.__config__.defaultValue)) {
        // 数组
        this.$set(
          this.activeData.__config__,
          'defaultValue',
          str.split(',').map(val => (isNumberStr(val) ? +val : val))
        )
      } else if (['true', 'false'].indexOf(str) > -1) {
        // 布尔
        this.$set(this.activeData.__config__, 'defaultValue', JSON.parse(str))
      } else {
        // console.log(str,'.........',this.activeData.__config__)
        // 字符串和数字
        this.$set(
          this.activeData.__config__,
          'defaultValue',
          isNumberStr(str) ? +str : str
        )
        // console.log(isNumberStr(str)?+str:str)
      }
    },
    onSwitchValueInput(val, name) {
      if (['true', 'false'].indexOf(val) > -1) {
        this.$set(this.activeData, name, JSON.parse(val))
      } else {
        this.$set(this.activeData, name, isNumberStr(val) ? +val : val)
      }
    },
    setTimeValue(val, type) {
        // const valueFormat = type === 'week' ? dateTimeFormat.date : val
        // this.$set(this.activeData['picker-options'], 'selectableRange', '')
        this.$set(this.activeData.__config__, 'defaultValue', null)
        this.$set(this.activeData, 'value-format', val)
        this.$set(this.activeData, 'format', val)
        let newVal = ''
        // 存储格式代码优化
        if (this.activeData.__config__.tagIcon === 'date') {
            if (val === 'yyyy-MM-dd HH:mm:ss') {
                newVal = 'datetime'
            } else if (val === 'yyyy-MM-dd') {
                newVal = 'date'
            } else if (val === 'yyyy-MM') {
                newVal = 'month'
            } else if (val === 'yyyy') {
                newVal = 'year'
            }
        } else if (this.activeData.__config__.tagIcon === 'date-range') {
            if (val === 'yyyy-MM-dd HH:mm:ss') {
                newVal = 'datetimerange'
            } else if (val === 'yyyy-MM-dd') {
                newVal = 'daterange'
            } else if (val === 'yyyy-MM') {
                newVal = 'monthrange'
            } else if (val === 'yyyy') {
                newVal = 'year'
            }
        }
        this.$set(this.activeData, 'type', newVal)
    },
    spanChange(val) {
      this.formConf.span = val
    },
    multipleChange(val) {
        if (this.activeData.__config__.tag === 'pictureSelect') {
            this.$set(this.activeData.__config__, 'defaultValue', '')
            if (val) {
                this.activeData.options.forEach(opt => {
                    this.$set(opt, 'checked', false)
                })
            }
        } else {
            this.$set(this.activeData.__config__, 'defaultValue', val ? [] : '')
        }
    },
    dateTypeChange(val) {
      this.setTimeValue(dateTimeFormat[val], val)
    },
    rangeChange(val) {
      this.$set(
        this.activeData.__config__,
        'defaultValue',
        val ? [this.activeData.min, this.activeData.max] : this.activeData.min
      )
    },
    rateTextChange(val) {
      if (val) this.activeData['show-score'] = false
    },
    rateScoreChange(val) {
      if (val) this.activeData['show-text'] = false
    },
    colorFormatChange(val) {
      this.activeData.__config__.defaultValue = null
      this.activeData['show-alpha'] = val.indexOf('a') > -1
      this.activeData.__config__.renderKey = +new Date() // 更新renderKey,重新渲染该组件
    },
    openIconsDialog(model) {
      this.iconsVisible = true
      this.currentIconModel = model
    },
    setIcon(val) {
      this.activeData[this.currentIconModel] = val
    },
    tagChange(tagIcon) {
      let target = inputComponents.find(item => item.__config__.tagIcon === tagIcon)
      if (!target) target = selectComponents.find(item => item.__config__.tagIcon === tagIcon)
      if (!target) target = organizationComponents.find(item => item.__config__.tagIcon === tagIcon)
      this.$emit('tag-change', target)
    },
    changeRenderKey() {
      if (needRerenderList.includes(this.activeData.__config__.tag)) {
        this.activeData.__config__.renderKey = +new Date()
      }
    },
    changeRenderKeyHeight() {
      this.activeData.__config__.renderKey = +new Date()
    },
    changeRenderMax() { //重新渲染最小行数 最大行数
      this.activeData.__config__.renderKey = +new Date()
    },
    //------字段名处实时显示重复字段
    //字段名校验
    // fieldValidator(rule, value, callback) {
    //   let fieldArr = []  //所有组件字段名组成的数组
    //   this.drawingList.map((item,index)=>{
    //     if(['Steps', 'el-tabs', 'el-collapse','el-card','Subform'].includes(item.__config__.tag)){
    //       //布局型组件--选项卡/折叠面板/卡片/步骤条
    //       item.__config__.children && item.__config__.children.map((layout,index)=>{
    //         layout.__config__.children && layout.__config__.children.map((layoutItem,index)=>{
    //           fieldArr.push(layoutItem.__vModel__)
    //         })
    //       })
    //     }else{
    //       //正常组件
    //       fieldArr.push(item.__vModel__)
    //     }
    //   })
    //   this.$store.commit("CHANGE_FIELD", false);
    //   fieldArr.map((val, index) => {
    //     if (fieldArr.indexOf(val) != fieldArr.lastIndexOf(val)) {
    //       //  console.log('重复项的下标:' + index);
    //       this.$store.commit("CHANGE_FIELD", true);
    //       // console.log('重复项的值:' + val);
    //       callback(new Error(`${val}字段名重复`))
    //     }
    //   })
    // },

    fieldValidator(rule, value, callback) {
      let pattern = /^[a-z0-9_]*$/
      if (!pattern.test(value)) {
        callback(new Error('请输入符合要求的字段名'))
      }
      let num = 0
      let fieldArr = []  //所有组件字段名组成的数组
      this.drawingList.map((item,index)=>{
        if(['Steps', 'el-tabs', 'el-collapse','el-card','Subform'].includes(item.__config__.tag)){
          //布局型组件--选项卡/折叠面板/卡片/步骤条
          item.__config__.children && item.__config__.children.map((layout,index)=>{
            layout.__config__.children && layout.__config__.children.map((layoutItem,index)=>{
              if(layoutItem.__vModel__ === value){
                num++
              }
            })
          })
        }else{
          //正常组件
          if(item.__vModel__ === value){
            num++ 
          }
        }
        if(num>1){
          callback(new Error(`${value}字段名重复`))
        }
      })
    },
    /* 选项卡相关 */
    addTab() {
      this.activeData.__slot__.options.push({
        title: '',
        name: '',
        content: 'this.children'
      })
      this.activeData.__config__.children.push(
        {
          __config__: {
            layout: 'rowFormItem',
            tagIcon: 'row',
            label: '行容器',
            layoutTree: true,
            document: 'https://element.eleme.cn/#/zh-CN/component/layout#row-attributes'
          },
          type: 'default',
          justify: 'start',
          align: 'top',
          componentName: 'el-row',
          itemBtns: false
        }
      )
      this.$emit('transTab', this.activeData)
    },
    deleteTab(index) {
      this.activeData.__slot__.options.splice(index, 1)
    },

    /* 折叠面板相关 */
    addCollapse() {
      this.activeData.__slot__.options.push({
        title: '',
        name: '',
        content: 'this.children'
      })
      this.activeData.__config__.children.push(
        {
          __config__: {
            layout: 'rowFormItem',
            tagIcon: 'row',
            label: '行容器',
            layoutTree: true,
            document: 'https://element.eleme.cn/#/zh-CN/component/layout#row-attributes'
          },
          type: 'default',
          justify: 'start',
          align: 'top',
          componentName: 'el-row',
          itemBtns: false
        }
      )
      this.$emit('transCollapse', this.activeData)
    },
  }
}
</script>

<style lang="less" scoped>
/deep/.el-tree-node__content{
    display: inline-block;
    max-width: 270px;
    margin: 3px 0px;
}
.el-input{
    width: 100%;
}
/deep/.custom-tree-node {
    display: inline-flex;
    .labelInputCss .el-input{
        width: auto;
    }
    .labelSpanCss{
        width: 185px;
        height: 25px;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        margin-right: 15px;
        text-overflow: ellipsis;
    }
    .el-icon-edit {
        color: #409EFF;
    }
    .el-input__inner{
        width: 185px;
        height: 25px;
        margin-right: 15px;
    }
}
.jsBtn {
    margin-left: 40px;
    width:160px
}
.picBorderCss{
    border: 1px solid lightgrey;
    padding: 5px;
    border-style: dashed;
    border-radius: 5px;
    display: flex;
    margin: 5px 0;
    width: 97%;
    :focus{
        border-color: orange;
    }
    /deep/.el-radio__label {
        padding-left: 0px;
    }
}
/deep/.el-upload {
    display: contents;
}
/deep/.el-select {
    width: 100%;
}
.backgroundEdit {
    position: relative;
    background-size:100% 100%;
    width: 50px;
    display:inline-block;
    height: 30px;
    margin-right: 5px;
}
.showEdit {
    position: absolute;
    height: 30px;
    width: 30px;
    display: inline-block;
    vertical-align: middle;
    line-height: 30px;
    opacity: 0;
    background-color: lightgrey;
}
.backgroundEdit :hover .showEdit{
    opacity: 0.7;
}
.picInput .el-input__inner{
    width: 85% !important;
    float: right;
}
.pcitureCss{
    width: 93%;
    margin: 0 auto;
    float: right;
}
.addPicCss{
    height: 46px;
    border: 1px solid lightgrey;
    text-align: center;
    font-weight: 600;
    line-height: 45px;
    font-size: 14px;
    border-radius: 5px;
    margin-top: 20px;
    border-style: dashed;
    cursor: pointer;
}
.el-range-editor.el-input__inner {
    width: 227px;
}
.right-board {
  width: 350px;
  position: absolute;
  right: 0;
  top: 0;
  padding-top: 3px;
  .field-box {
    position: relative;
    height: calc(100vh - 42px);
    box-sizing: border-box;
    overflow: hidden;
  }
  .el-scrollbar {
    height: 100%;
  }
  /deep/.el-form-item__label{
    color: rgba(0,0,0,0.85);
    font-size: 14px;
    font-family: Roboto, Roboto-Regular;
    font-weight: 400;
  }
}

.select-item {
  display: flex;
  border: 1px dashed #fff;
  box-sizing: border-box;
  & .close-btn {
    cursor: pointer;
    color: #f56c6c;
  }
  & .el-input + .el-input {
    margin-left: 4px;
  }
}
.select-item + .select-item {
  margin-top: 4px;
}
.select-item.sortable-chosen {
  border: 1px dashed #409eff;
}
.select-line-icon {
  line-height: 32px;
  font-size: 22px;
  padding: 0 4px;
  color: #777;
}
.option-drag {
  cursor: move;
}
.time-range {
  .el-date-editor {
    width: 227px;
  }
  ::v-deep .el-icon-time {
    display: none;
  }
}
.document-link {
  position: absolute;
  display: block;
  width: 26px;
  height: 26px;
  top: 0;
  left: 0;
  cursor: pointer;
  background: #409eff;
  z-index: 1;
  border-radius: 0 0 6px 0;
  text-align: center;
  line-height: 26px;
  color: #fff;
  font-size: 18px;
}
.node-label{
  font-size: 14px;
}
.node-icon{
  color: #bebfc3;
}
/* 选项卡相关 */
.tabs-item {
  display: flex;
  border: 1px dashed #fff;
  box-sizing: border-box;
  .close-btn {
    cursor: pointer;
    color: #f56c6c !important;
  }
  + .tabs-item {
    margin-top: 4px;
  }
  .tabs-line-icon {
    line-height: 32px;
    font-size: 22px;
    padding: 0 4px;
    color: #777;
  }
  .option-drag {
    cursor: move;
  }
}
  .titleFont{
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #f0f0f0;
    line-height: 40px;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 550;
    color: rgba(0, 0, 0, 0.55);
    margin-bottom: 10px;
  }
  .title-no{
    font-size: 13px;
    color: rgba(0,0,0,0.45);
  }
  .tabsAttribute::before{
    content: "";
    position: absolute;
    left: -1px;
    width: 1px;
    height: 52px;
    background-color: #f1e8e8;
    z-index: 1;
    margin-top: -14px;
  }
</style>
